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 to replace broken images帖子。

根据您的需要调整：

<强> HTML：

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

<强> JS：

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

Fiddle

或者使用jQuery：

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

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

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

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

Answer 2

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

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

由于您已经加载了图像，而不是为每个图像执行另一个请求，您可以使用我在另一个问题中讨论的方法：Check if user is blocking 3rd party domain

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

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

2 个答案: