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

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

HTML

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：

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迭代元素，使用.attr()获取其src属性并将其传递给方法。

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

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