jQuery/JavaScript替换破碎的图像

我有一个网页，里面有很多图片。有时映像不可用，因此在客户机的浏览器中显示一个损坏的映像。

我如何使用jQuery来获取图像集，过滤它到破碎的图像，然后替换src?

—我本以为用jQuery会更容易做到这一点，但事实证明使用纯JavaScript解决方案更容易，也就是Prestaul提供的解决方案。

当前回答

这是一个蹩脚的技巧，但它几乎是可以保证的:

<img onerror="this.parentNode.removeChild(this);">

其他回答

我相信这就是你想要的:jQuery。预加载

下面是演示中的示例代码，你指定加载和未找到的图像，你就全部设置好了:

jQuery('#images img').preload({
  placeholder:'placeholder.jpg',
  notFound:'notfound.jpg'
});

使用JavaScript处理图像的onError事件以重新分配其源:

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

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

或者没有JavaScript函数:

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

下面的兼容性表列出了支持错误功能的浏览器:

http://www.quirksmode.org/dom/events/error.html

更好的呼叫使用

jQuery(window).load(function(){
    $.imgReload();
});

因为使用文档。ready并不一定意味着图像被加载，只是HTML。因此，不需要延迟调用。

这是一个蹩脚的技巧，但它几乎是可以保证的:

<img onerror="this.parentNode.removeChild(this);">

如果图像无法加载(例如，因为它不在提供的URL中)，图像URL将被更改为默认值，

有关.error()的更多信息

美元(img)。On('错误'，函数(e) { (美元)。attr(“src”、“broken.png”); })；

推荐文章