如果头404比隐藏它,jQuery检查图像存在

Question

使用php从数据库中获取100张照片网址并在页面上显示,但有些照片可能不再存在.如果照片网址失败(404)我想使用jquery来隐藏图像,并且不想显示任何错误图片.这是我的代码,但它不起作用.

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

当您可以使用该onerror事件时,不需要发送多个ajax请求.

查看相关的jQuery/Javascript以替换损坏的图像.

根据您的需求进行调整:

HTML:

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

JS:

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

小提琴

或者使用jQuery:

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

我通常不会在HTML中使用内联JS,甚至考虑使用.error处理程序:

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

但是如果在错误事件触发后执行处理程序附加,则上述操作无效,因此我建议使用第一个解决方案.

Answer 2

该方法的第二个参数open是 url，而不是 HTML 元素数组。

因此，您可以使用each来迭代元素，使用它们src获取属性.attr()并将其传递到方法中。

由于您已经加载了图像，因此您可以使用我在另一个问题中讨论的方法：检查用户是否正在阻止第 3 方域，而不是对每个图像执行另一个请求

如果您的图像没有固定的高度/宽度，则不存在的图像将生成一个小图标，指示该图像不存在。您可以使用图像的大小来查看图像是否已加载。