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
}