jQuery/JavaScript 替换损坏的图像

IT技术 javascript jquery html brokenimage
2021-01-30 00:00:55

我有一个包含一堆图像的网页。有时图像不可用，因此客户端浏览器中会显示损坏的图像。

如何使用 jQuery 获取图像集，将其过滤为损坏的图像，然后替换 src？

-- 我认为使用 jQuery 会更容易做到这一点，但结果证明只使用纯 JavaScript 解决方案要容易得多，即 Prestaul 提供的解决方案。

6个回答

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

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

我想并希望我们远离 javascript 事件的内联属性......
2021-03-13 00:00:55
好点 NickC，关于显示正在发生的事情的标记，当我看到它时，我只是畏缩：P
2021-03-14 00:00:55
@redsquare，我完全同意，但这是一个独特的案例。内联是您可以绝对确定事件不会在您的侦听器被连接之前触发的唯一地方。如果您在文档末尾执行此操作或等待 DOM 加载，您可能会错过某些图像上的错误事件。在事件触发后附加错误处理程序对您没有好处。
2021-03-14 00:00:55
redsquare...当您明智地控制它们时，它们是完全可以理解的，甚至在您希望标记反映实际将发生的情况时也很有用。
2021-03-28 00:00:55
您可能想在设置 src之前清除 onerror 。否则，如果 noimage.gif 也丢失了，您可能最终会出现“堆栈溢出”。
2021-04-04 00:00:55

我使用内置error处理程序：

$("img").error(function () {
    $(this).unbind("error").attr("src", "broken.gif");
});

编辑：该error()方法在jquery 1.8及更高版本中已弃用。相反，您应该使用.on("error")：

$("img").on("error", function () {
    $(this).attr("src", "broken.gif");
});
如果您使用这种技术，您可以使用“one”方法来避免取消绑定事件： $('img').one('error', function() { this.src = 'broken.gif'; }) ;
2021-03-17 00:00:55

如果像我这样的人试图将error事件附加到动态 HTMLimg标签，我想指出的是，有一个问题：

显然img错误事件在大多数浏览器中不会冒泡，这与标准所说的相反。

因此，类似以下内容将不起作用：

$(document).on('error', 'img', function () { ... })

希望这对其他人有帮助。我希望我在这个线程中看到过这个。但是，我没有。所以，我添加它

没有用。我动态加载一个死图像并将其附加到 dom，并且没有触发 'error' 事件。
2021-03-24 00:00:55

这是一个独立的解决方案：

$(window).load(function() {
  $('img').each(function() {
    if ( !this.complete
    ||   typeof this.naturalWidth == "undefined"
    ||   this.naturalWidth == 0                  ) {
      // image was broken, replace with your new image
      this.src = 'http://www.tranism.com/weblog/images/broken_ipod.gif';
    }
  });
});
几乎正确...... IE 中的正确图像仍将返回 (typeof(this.naturalWidth) == "undefined") == true; - 我将 if 语句更改为 (!this.complete || (!$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0)))
2021-03-20 00:00:55

我相信这就是你所追求的：jQuery.Preload

这是演示中的示例代码，您指定加载和未找到的图像，然后一切就绪：

jQuery('#images img').preload({
  placeholder:'placeholder.jpg',
  notFound:'notfound.jpg'
});
是的......这是在第一行的答案中链接的。
2021-04-01 00:00:55
其它你可能感兴趣的问题
上一篇JavaScript 'bind' 方法的用途是什么？ 下一篇使用 Ajax 以一种形式同时上传数据和文件？