隠す李壊れた画像

Question

は、私は、各画像が李に包まれている画像の一覧がある場合：私はこの全体のリーを非表示にすることができますどのように

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

を場合は画像1.JPGあたかもDOMに存在しなかったかのように壊れていますか？

hide the imageにいくつかの良いjsが見つかりました。another SO postから学んだので、私はdisplay:noneにしたいので、空の行を作成しません。しかし、私はこれらを一緒に置くことに問題があります。それは決してDOMに存在しないかのようにあなたが本当にそれをしたい場合は、あなたもそれを取り除くことができ、

<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(); 
} 

をまたは：：

Answer 1

あなたがイメージのonerrorハンドラを使用することができます

// 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：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

.ERRORイベントハンドラがありますhttp://api.jquery.com/error/。

例：

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

}); 

Answer 3

のjQueryを使用すると、あなたの<li>をロードするように設定することができる唯一の<img>負荷IF。 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だとあなたがちょうど1つが必要な場合はそれにクラスを与える、またはページ上のすべての画像を選択するいずれかの場合あなたは欲しい。私の例では、クラスをグループとして選択するためにクラスを使用します。

のjQuery：

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

基本的には、画像が読み込まれるまで隠されています。