ausblenden li wenn gebrochen Bild

Question

Ich habe eine Liste der Bilder, wobei jedes Bild in einem li gewickelt ist:

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

Wie kann ich diese ganze li verstecken wenn Bild 1.jpg ist gebrochen, als ob es nie im DOM existierte?

Ich fand einige gute js auf, wie man hide the image und lernte von another SO post, dass ich display:none will, so dass ich keine leere Zeile erstellen. Aber ich habe Probleme, diese zusammenzusetzen.

Answer 1

Sie können einen onerror Handler für das Bild verwenden:

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

Oder könnten Sie es sogar nur entfernen, wenn Sie es wirklich wollen, als wäre es nie in den DOM vorhanden:

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

---

Wenn Sie keinen onerror Handler in den HTML-Code (der einzige zuverlässige Ort, den Sie es setzen können) setzen, dann können Sie die Bilder zunächst ausblenden und dann überprüfen .complete wenn Ihre jQuery läuft und wenn das Bild noch nicht vollständig ist, dann eine .load() Handler wie folgt installieren:

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

In jQuery gibt es .error Event-Handler http://api.jquery.com/error/.

Beispiel:

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

}); 

Answer 3

jQuery verwenden können Sie Ihre <li> nur gesetzt, wenn die <img> Lasten zu laden. Read along here.

HTML beginnt wie:

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

Entweder es eine Klasse geben, wenn sie Teil einer Gruppe ist, eine ID, wenn es sehr spezifisch ist, und Sie wollen nur, dass ein oder wählen Sie alle Bilder auf der Seite, wenn Sie wollen. In meinem Beispiel verwende ich die Klasse, um sie als Gruppe auszuwählen.

jQuery:

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

Im Grunde ist es, bis das Bild geladen versteckt ist.