18

使用 php 从数据库中获取 100 张照片 url 并在页面上显示它们，但有些照片可能不再存在。如果照片 url 失败 (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();
    }
});
4

2 回答 2

34

当您可以使用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();
});

但是如果在错误事件触发后执行附加的处理程序，上述方法将不起作用，因此我建议第一个解决方案。

于 2012-10-21T02:42:48.057 回答
1

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

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

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

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

于 2012-10-21T02:38:52.187 回答