I have a page with many images hidden inside a set of disclosures. When you click on the title of the section, the image (as well as other things) appears. So far so good. However, there are many of these images, which leads to ridiculous loading times, so I want to load them only when they need to be displayed. When I open the section, I check whether the src of the image is set, and if it isn't, I set it and the image loads. I have found, however, that if I omit the src attribute of my <img>, Javascript (in Chrome) considers it === ''. It's identical to the empty string! I would have expected it to be undefined.
我有一个页面,其中包含许多隐藏在一系列披露内的图片。单击该部分的标题时,将显示图像(以及其他内容)。到现在为止还挺好。但是,有许多这些图像,导致荒谬的加载时间,所以我只想在需要显示时加载它们。当我打开该部分时,我检查是否设置了图像的src,如果不是,我设置它并加载图像。但是,我发现如果我省略了我的
的src属性,Javascript(在Chrome中)认为它===''。它与空字符串相同!我本来以为它是未定义的。
This is pretty nice, but it seems a bit too nice. How do different browsers evaluate img.src when img is an <img> tag without a src? If I check that img.src === '', is this safe on other browsers?
这很不错,但似乎有点太好了。当img是没有src的标签时,不同浏览器如何评估img.src?如果我检查img.src ==='',这在其他浏览器上是否安全?
2 个解决方案
#1
1
You can simply check it like this:
您可以像这样检查:
if (!img.src) {
// need to set the .src property here
}
Since this checks for any falsey value, this will cover you no matter whether the browser returns null, undefined or "".
由于这会检查任何falsey值,无论浏览器是返回null,undefined还是“”,这都将覆盖您。
FYI, I tried this jsFiddle in Firefox, Chrome and IE and they all returned the empty string for the .src property, but checking for any falsey value as above will make your code more permissible if some older version of some browser has a slightly different idea.
仅供参考,我在Firefox,Chrome和IE中尝试了这个jsFiddle,他们都返回了.src属性的空字符串,但如果某些浏览器的某些旧版本略有不同,那么检查上面的任何falsey值将使您的代码更容易被允许理念。
#2
0
For all the modern browsers, an image with no SRC is complete. But, according to IE, an image with no SRC is not complete - is not loaded. You could use getAttribute() to check if src attribute exists. Like:
对于所有现代浏览器,没有SRC的图像是完整的。但是,根据IE,没有SRC的图像不完整 - 没有加载。您可以使用getAttribute()来检查src属性是否存在。喜欢:
if( !img.getAttribute('src') ) {
//the img does not have src attribute
}
#1
1
You can simply check it like this:
您可以像这样检查:
if (!img.src) {
// need to set the .src property here
}
Since this checks for any falsey value, this will cover you no matter whether the browser returns null, undefined or "".
由于这会检查任何falsey值,无论浏览器是返回null,undefined还是“”,这都将覆盖您。
FYI, I tried this jsFiddle in Firefox, Chrome and IE and they all returned the empty string for the .src property, but checking for any falsey value as above will make your code more permissible if some older version of some browser has a slightly different idea.
仅供参考,我在Firefox,Chrome和IE中尝试了这个jsFiddle,他们都返回了.src属性的空字符串,但如果某些浏览器的某些旧版本略有不同,那么检查上面的任何falsey值将使您的代码更容易被允许理念。
#2
0
For all the modern browsers, an image with no SRC is complete. But, according to IE, an image with no SRC is not complete - is not loaded. You could use getAttribute() to check if src attribute exists. Like:
对于所有现代浏览器,没有SRC的图像是完整的。但是,根据IE,没有SRC的图像不完整 - 没有加载。您可以使用getAttribute()来检查src属性是否存在。喜欢:
if( !img.getAttribute('src') ) {
//the img does not have src attribute
}