img标记中缺少的src属性如何在浏览器中表现?

时间:2014-06-23 07:17:15

标签: javascript html cross-browser

我有一个页面,其中包含许多隐藏在一系列披露内的图片。单击该部分的标题时,将显示图像(以及其他内容)。到现在为止还挺好。但是,有很多这些图像,导致荒谬的加载时间,所以我只想在需要显示时加载它们。当我打开该部分时,我会检查图像的src是否已设置,如果不是,我会设置它并加载图像。但是,我发现,如果我省略src的{​​{1}}属性,则Javascript(在Chrome中)将其视为<img>。它与空字符串完全相同!我原以为它是=== ''

这很不错,但似乎有点太好了。如果undefinedimg.src标记而没有img,则不同浏览器如何评估<img>?如果我检查src,这在其他浏览器上是否安全?

2 个答案:

答案 0 :(得分:1)

你可以这样检查:

if (!img.src) {
    // need to set the .src property here
}

由于这会检查任何falsey值,无论浏览器是返回nullundefined还是"",都会覆盖您。

仅供参考,我在Firefox,Chrome和IE中尝试了this jsFiddle并且他们都返回了.src属性的空字符串,但检查上述任何虚假值会使您的代码更容易被允许某些浏览器的旧版本的想法略有不同。

答案 1 :(得分:0)

对于所有现代浏览器,没有SRC的图像已完成。但是,根据IE,没有SRC的图片不完整 - is not loaded。您可以使用getAttribute()检查是否存在src属性。像:

if( !img.getAttribute('src') ) {
    //the img does not have src attribute
}