jQuery để kiểm tra hình ảnh tồn tại nếu đầu 404 ẩn nó

Question

Sử dụng php để lấy 100 ảnh url từ một db và hiển thị chúng trên một trang, nhưng một số ảnh có thể không còn tồn tại nữa. Nếu url ảnh không thành công (404) tôi muốn sử dụng jquery để ẩn hình ảnh và không muốn hiển thị bất kỳ hình ảnh lỗi nào. Đây là mã của tôi nhưng nó không hoạt động.

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

Tham số thứ hai của phương pháp open là một url, không phải là một mảng của các phần tử HTML.

Vì vậy, bạn có thể sử dụng each để lặp qua các thành phần, nhận thuộc tính src bằng cách sử dụng .attr() và chuyển giá trị đó vào phương thức.

Vì bạn có những hình ảnh nạp đã có, thay vì làm một yêu cầu cho mỗi một, bạn có thể sử dụng một phương pháp tôi đã thảo luận trong một câu hỏi khác: Check if user is blocking 3rd party domain

Nếu hình ảnh của bạn không có chiều cao cố định/chiều rộng, một hình ảnh không tồn tại sẽ tạo ra một biểu tượng nhỏ cho biết hình ảnh không tồn tại. Bạn có thể sử dụng kích thước của hình ảnh để xem hình ảnh đã được tải hay chưa.

Answer 2

Gửi yêu cầu ajax bội số là không cần thiết khi bạn có thể sử dụng sự kiện onerror.

Khám phá bài đăng có liên quan jQuery/Javascript to replace broken images.

Thích ứng rằng yêu cầu của bạn:

HTML:

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

JS:

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

Fiddle

Hoặc với jQuery:

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

---

Tôi thường sẽ không sử dụng inline JS trong HTML, và thậm chí coi là sử dụng một .error handler:

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

Nhưng ở trên sẽ không hoạt động nếu gắn handler là được thực hiện sau khi sự kiện lỗi đã được kích hoạt, do đó tôi đề xuất giải pháp đầu tiên.