jQuery do sprawdzenia obrazu istnieje, jeśli głowa 404 niż ukryj

Question

Korzystanie z php w celu uzyskania adresu URL ze 100 zdjęć z bazy danych i pokazania ich na stronie, ale niektóre zdjęcia mogą już nie istnieć. Jeśli adres URL zdjęcia kończy się niepowodzeniem (404), chcę użyć jquery, aby ukryć obraz i nie chcę pokazywać żadnego obrazu błędu. To jest mój kod, ale to nie działa.

HTML

<div id=test> 
    <img src="http://test.com/test1.jpg" /> 
    <img src=" http://test.com/test2.jpg" /> 
    <img src="http://test.com/test3.jpg" /> 
</div> 

jQuery

var pic_list = jQuery("#test img"); 

pic_list.load(function() { 
    var http = new XMLHttpRequest(); 
    http.open('HEAD', pic_list, false); 
    http.send(); 
    if (http.status == 404) { 
     pic_list.hide(); 
    } else { 
     pic_list.show(); 
    } 
}); 

Answer 1

Drugi parametr sposobu open jest URL nie tablica elementów HTML.

Dzięki temu można użyć each do iteracji po elementach, uzyskania ich atrybutu src przy użyciu .attr() i przekazania go do metody.

Skoro masz już załadowane obrazy, zamiast robić kolejną prośbę dla każdego z nich, może być w stanie wykorzystać metodę omówiłem w innym pytaniem: Check if user is blocking 3rd party domain

Jeśli twoje zdjęcia nie są ustalone wysokość/szerokość, nieistniejący obraz spowoduje wyświetlenie małej ikony wskazującej, że obraz nie istnieje. Możesz użyć rozmiaru obrazu, aby sprawdzić, czy obraz został załadowany, czy nie.

Answer 2

Wysyłanie wielokrotnych zapytań dotyczących ajaxów jest zbędne, kiedy można użyć zdarzenia onerror.

Sprawdź powiązany wpis jQuery/Javascript to replace broken images.

Adaptacja że do swoich potrzeb:

HTML:

<img src="someimage.png" onerror="imgError(this);" /> 

JS:

function imgError(image){ 
    image.style.display = 'none'; 
} 

Fiddle

lub jQuery:

function imgError(image){ 
    $(image).hide(); 
} 

---

normalnie nie użyłby inline JS w kodzie HTML, a nawet za zastosowaniem .error Handler:

$('#test img').error(function() { 
    $(this).hide(); 
}); 

Ale powyższe nie będzie działać, jeśli jest dołączanie obsługi wykonywany po wystrzeleniu zdarzenia błędu, dlatego sugeruję pierwsze rozwiązanie.