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

Question

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

这很不错，但似乎有点太好了。 当img是没有src的<img>标签时，不同浏览器如何评估img.src ？ 如果我检查img.src === '' ，这在其他浏览器上是否安全？

Answer 1

您可以像这样检查：

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

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

仅供参考，我在Firefox，Chrome和IE中尝试了这个jsFiddle ，他们都返回了.src属性的空字符串，但如果某些浏览器的某些旧版本略有不同，则检查上述任何虚假值将使您的代码更容易被允许理念。

Answer 2

对于所有现代浏览器，没有SRC的图像是完整的。 但是，根据IE，没有SRC的图像不完整 - is not loaded 。 您可以使用getAttribute（）来检查src属性是否存在。 喜欢：

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