隱藏李若跌破圖像

Question

我有每個圖像被包裹在一個李圖像列表：

<li><a href='http://www.so.com'><img src='http://www.so.com/1.jpg'></a></li> 

如何隱藏這整個李如果圖像1.JPG被打破，好像它從來沒有在DOM中存在過？

我發現一些很好的js如何hide the image和從another SO post瞭解到我想display:none所以我不創建一個空行。但是我很難將這些放在一起。

Answer 1

您可以使用onerror處理程序圖像：

<li><a href='http://www.so.com'> 
<img src='http://www.so.com/1.jpg' onerror='hideContainer(this)'> 
</a></li> 

// this function must be in the global scope 
function hideContainer(el) { 
    $(el).closest("li").hide(); 
} 

或者，你甚至可以只是刪除它，如果你真的想要它，就好像它從來沒有在DOM現有：

// this function must be in the global scope 
function hideContainer(el) { 
    $(el).closest("li").remove(); 
} 

---

如果你不想把一個onerror處理程序放入HTML（唯一可靠的地方，你可以把它），那麼你可以最初隱藏圖像，然後檢查.complete何時您的jQuery的運行，如果圖像尚未完成，然後安裝一個​​處理程序是這樣的：

CSS：

/* use some more specific selector than this */ 
li {display: none;} 

的jQuery：

$("li img").each(function() { 
    if (this.complete) { 
     // img already loaded successfully, show it 
     $(this).closest("li").show(); 
    } else { 
     // not loaded yet so install a .load handler to see if it loads 
     $(this).load(function() { 
      // loaded successfully so show it 
      $(this).closest("li").show(); 
     }); 
    } 
}); 

Answer 2

在jQuery中有.error事件處理程序http://api.jquery.com/error/。

例子：

$('img').error(function(event) { 
    $(this).closest('li').hide();  

}); 

Answer 3

使用jQuery你可以設置你<li>加載只有當<img>負荷。 Read along here.

HTML開始爲：

<li style="display: none;"><a href='http://www.so.com'><img src='http://www.so.com/1.jpg' id="imgOne" class="imgSet"></a></li> 

要麼給它一個類，如果它是一個組的一部分，如果它是非常具體的，你只需要一個，或選擇所有的頁面，如果在圖像的ID你要。對於我的示例，我將使用該類將其選爲一個組。

的jQuery：

$('.imgSet').load(function() { 
    $(this).parents('li').show(); 
}); 

基本上它的隱藏圖像加載到。