Ukryj uszkodzone obrazy jQuery

Question

Mam zawartość ze zepsutymi obrazami, wiele obrazów na każdej stronie. Niektóre obrazy mają pustą wartość src, a niektóre po prostu zerwane 404 linki.

I zostały próbuje użyć

<script type="text/javascript"> 
$(document).ready(function() { 
    $("img").error(function(){ 
    $(this).hide(); 
    }); 
}); 
</script> 

To nie działa zgodnie z oczekiwaniami, nie działa w IE, w chromie muszę odświeżyć stronę po pierwszym obciążeniu ukryć obrazy. Googled dużo, ale wszystkie inne kody są takie same.

Edytowanie tagu <img> NIE jest dla mnie opcją.

Co jest nie tak z tym kodem?

Answer 1

używać go zamiast

<img src="image.png" onError="this.onerror = '';this.style.visibility='hidden';" /> 

test

lub można to zrobić dla wszystkich obrazów

$(window).load(function() { 
    $("img").each(function(){ 
     var image = $(this); 
     if(image.context.naturalWidth == 0 || image.readyState == 'uninitialized'){ 
     $(image).unbind("error").hide(); 
     } 
    }); 
}); 

demo

Answer 2

przypadku obrazów, które mogą istnieć i znaleźć najbardziej elegancki rozwiązaniem jest użycie $ ajax, na przykład:

$.ajax({ 
    url: 'your_image.jpg', 
    type: "POST", 
    dataType: "image", 
    success: function() { 
     /* function if image exists (setting it in div or smthg.)*/ 
    }, 
    error: function(){ 
     /* function if image doesn't exist like hideing div*/ 
    } 
}); 

Ale niektórzy ludzie lubią useing Hiden obrazy, które pokazują się po obciążeniu jak:

<img src="your_image.jpg" onload="loadImage()"> 

Oba rozwiązania są wysoce efektywną, należy taki, który pasuje do Twojego problemu najlepiej

dobrze jeśli u nie może edytuj img spróbuj coś takiego:

$(document).ready(function() { 
    $("#img").hide(); 
    $('#img').load(function() { 
    $("#img").show(); 
    }); 
}); 

BTW czy masz identyfikator obrazu lub czy musisz to zrobić dla losowa ilość zdjęć, których nie masz ???

Answer 3

To jest bardzo proste,

Po prostu trzeba dodać onError atrybut:

<img src="image.png" onerror='$(this).hide();'/> 

Jeśli obraz daje błąd ukrywa

Answer 4

pracowałem na coś podobnego, gdzie musiałem zaktualizować swój DOM za pomocą kanału JSON, który składał się z adresów URL obrazu, ale przed aktualizacją DOM musiałem wykryć uszkodzone obrazy, a także uniknąć ładowania obrazów o szerokości> 1000px. Próbowałem dodać wbudowane rozwiązania onerror i zapytanie DOM po załadowaniu strony i usunięciu lub ukryciu elementu div przed wyświetleniem, ale było to kosztowne i utrudnione doświadczenie użytkownika. Myślę, że jest to lepsze podejście i zapisuje zapytanie DOM i może działać w dowolnej przeglądarce.

Oto rozwiązanie na jsfiddle. http://jsfiddle.net/vchouhan/s8kvqj3e/60/

$(document).ready(function() { 
// For demo purposes, I'm going to pass this URL variable to my function. 
//resolved URL 
var url = "http://asmarterplanet.com/mobile-enterprise/files/bus-stop-app.png", 

//broken url 
brokenUrl = "http://pbs.twimg.com/profile_images/481800387230318592/pVyU2bzj_normal.jpeg"; 

    //Method takes the URL as a parameter to check if it resolves 
var f_testImage = function(url){ 
    /* 
     When the preloadImages Async call returns the object 
     Validate and do the needful 
    */ 
    $.when(f_preloadImages(url)).done(function (returnedObj){ 
     /* 
      If successful and Width > 500 
      (this was for my purpose, you can ignore it) 
     */ 
     if (returnedObj && returnedObj.width > 500) { 
      alert("width greater than 500px: "+ returnedObj.width + "px"); // Alerts src.width > 500     
     } else { 
      alert("width smaller than 500px: "+ returnedObj.width + "px"); // Alerts src.width < 500    
     } 
    }).fail(function(returnedObj){  // Fail condition captured through imgDfd.reject();  
     alert("image URL is broken and the width is: " + returnedObj); 
    }); 
}; 

var f_preloadImages = function(imgurl) { 
    var img = new Image(); // declare new img object 
    imgDfd = new $.Deferred();// declare new deferred object 

    // Test onload 
    img.onload = function() { 
     return imgDfd.resolve(img); 
    }; 
    // Test onerror 
    img.onerror = function() { 
     return imgDfd.reject(0); 
    }; 

    //Add imgURL to imgSrc after onload and onerror is fired 
    img.src = imgurl; 
    return imgDfd.promise(); 
}; 

//Fire testImage with url and then with brokenUrl as parameter 
f_testImage(brokenUrl); 

});

Answer 5

Dlaczego po prostu nie łączą zdarzeń DOM z jQuery:

$("img").each(function() { 
    var $this = $(this); 

    this.onerror = function() { 
     $this.hide(); 
    }; 
}); 

Ten pracował dla mnie.