我有一个网页,里面有很多图片。有时映像不可用,因此在客户机的浏览器中显示一个损坏的映像。
我如何使用jQuery来获取图像集,过滤它到破碎的图像,然后替换src?
—我本以为用jQuery会更容易做到这一点,但事实证明使用纯JavaScript解决方案更容易,也就是Prestaul提供的解决方案。
我有一个网页,里面有很多图片。有时映像不可用,因此在客户机的浏览器中显示一个损坏的映像。
我如何使用jQuery来获取图像集,过滤它到破碎的图像,然后替换src?
—我本以为用jQuery会更容易做到这一点,但事实证明使用纯JavaScript解决方案更容易,也就是Prestaul提供的解决方案。
当前回答
当OP正在寻找替换SRC时,我相信许多人遇到这个问题可能只希望隐藏损坏的图像,在这种情况下,这个简单的解决方案对我来说非常有用。
使用内联JavaScript:
<img src="img.jpg" onerror="this.style.display='none';"/>
使用外部JavaScript:
var images = document.querySelectorAll('img'); For (var I = 0;I < images.length;我+ +){ 图像[我]。Onerror = function() { this.style.display = '没有'; } } <img src='img.jpg' />
使用现代外部JavaScript:
document.querySelectorAll('img').forEach((img) => { img。Onerror = function() { This.style.display = 'none'; } }); <img src='img.jpg' />
参见浏览器对NodeList的支持。forEach和arrow函数。
其他回答
这是一个蹩脚的技巧,但它几乎是可以保证的:
<img onerror="this.parentNode.removeChild(this);">
我用这两个简单的函数解决了这个问题:
function imgExists(imgPath) {
var http = jQuery.ajax({
type:"HEAD",
url: imgPath,
async: false
});
return http.status != 404;
}
function handleImageError() {
var imgPath;
$('img').each(function() {
imgPath = $(this).attr('src');
if (!imgExists(imgPath)) {
$(this).attr('src', 'images/noimage.jpg');
}
});
}
我发现这是最好的工作方式,如果任何图像第一次加载失败,它将完全从DOM中删除。执行console.clear()可以保持控制台窗口干净,因为404错误不能被try/catch块忽略。
$('img').one('error', function(err) {
// console.log(JSON.stringify(err, null, 4))
$(this).remove()
console.clear()
})
如果图像无法加载(例如,因为它不在提供的URL中),图像URL将被更改为默认值,
有关.error()的更多信息
美元(img)。On('错误',函数(e) { (美元)。attr(“src”、“broken.png”); });
更好的呼叫使用
jQuery(window).load(function(){
$.imgReload();
});
因为使用文档。ready并不一定意味着图像被加载,只是HTML。因此,不需要延迟调用。