Wie ausgebrochene Bilder in IE mit jQuery ausblenden?

Question

Ich habe diesen Code aus der jQuery-Site kopiert versucht, aber es schlägt in IE7/IE8, funktioniert aber in anderen Browsern. Was mit diesem Code nicht stimmt, stammt von der jQuery-Site (http://api.jquery.com/error/). Ich benutze jQuery Version 1.4.4.

$(document).ready(function(){ 
    $("img").error(function(){ 
    $(this).hide();  
    });  
}); 

Answer 1

Das Problem ist, dass durch die Zeit $(document.ready) ausgeführt wird, hat das Bild schon fertig geladen, so dass die Last/Fehlerereignisse werden nicht mehr ausgelöst werden.

Die einzige Art, wie ich mir vorstellen kann, dies zu umgehen, ist das Bild neu zu laden, also „Kraft“ das Ereignis ausgelöst werden:

$(document).ready(function(){ 
    $("img").each(function(index) { 
     $(this).error(function() { 
      $(this).hide();  
     }); 
     $(this).attr("src", $(this).attr("src")); 
    });  
}); 

Es sollte nicht allzu schlecht sein auf die Leistung wie die Bilder werden höchstwahrscheinlich aus dem Cache genommen werden, nicht wirklich vom Server neu geladen.

Live-Testfall (mit kühlen Katzen;)) finden Sie hier: http://jsfiddle.net/yahavbr/QvnBC/1/

Answer 2

die obige Lösung verwendet noch einen kurzen Auftritt des ‚gebrochenen Bild Symbols‘ verursachen, weil es eine Latenz zwischen error() und hide() .

Ich verwendete die , die Rückruf ermöglicht, wenn das Bild erfolgreich geladen wurde. Zuerst setze ich das Bild auf visibility:hidden. Dann habe ich es zu visible, wenn es erfolgreich geladen:

$('div.target img').each(function(){ 
    $(this).imagesLoaded(function(){ 
    $(this).css('visibility','visible'); 
    }) 
}) 

Diese verwendet ein bisschen mehr Ressourcen, sondern wird das ‚gebrochene Bild Symbol‘ von zeigt gar zu verhindern. Ich benutze diese Site nicht überall, sondern nur Bereiche, in denen ein Bildbruch möglich ist.

Answer 3

In meinem Fall in IE8 wurde mein Ersatzbild immer noch nicht geladen. Der folgende Code hat das für mich festgelegt. Sie müssen möglicherweise mit der Timeout-Verzögerung herumspielen, um herauszufinden, was am besten funktioniert.

setTimeout(function() { 
    $("img").each(function() { 
     $(this).error(function() { 
      $(this).attr("src", "../imageupload/image-failed.png"); 
     }); 
     $(this).attr("src", $(this).attr("src")); 
    }); 
}, 100);