javascript - 处理损坏图像的最佳方法是什么？

Question

所以似乎有几种方法可以处理 html 页面上损坏的图像。我想知道哪些方式比较流行，哪些方式被认为是最佳实践？

首先，我自己看了一些:

function imgErr(source) {     
    source.src = /images/missing.jpg";
    source.onerror = "";
    return true;
}
<img src="test.jpg" alt="test" title="test" onerror="imgErr(this);" />

优点:每次都有效，事件总会被捕获。用户永远不会看到损坏的图像。似乎跨浏览器运行良好。 缺点:每个图像都需要 onerror 标签，函数 imgErr(source) 需要在头部以捕获错误，减慢用户体验的加载时间

$('img').error(function(){
  $(this).attr('src', 'missing.jpg');
});

优点:代码很少，无需更改标记即可处理所有图像，可以放在头部之外 缺点:根据页面加载事件的速度可能会错过错误事件，减慢用户体验的加载时间

$(window).load(function() {
    $("img").each(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            var src = $(this).attr("src");
            var suffix = src.substring(src.length - 6, src.length).split('.')[0];
            suffix = suffix.charAt(suffix.length - 1);            
            $(this).attr("src", "/static/images/generic/missing_" + suffix + ".jpg");
        }
    });
});

优点:可以放置在页面的任何位置，无论何时运行都会修复图像，不会减慢用户体验的加载时间 缺点:在运行之前显示损坏的图像，造成糟糕的用户体验

在我的情况下，加载时间是最大的问题，但我无法获得在 IE 中正常工作的最后一个选项，因为它会更改损坏的图像和没有损坏的图像!

干杯， 丹尼斯

Answer 1

我突然想到的一个想法是在您的网络服务器上创建一个图像处理程序，即

<img src="fetchimage.aspx?name=test.jpg" alt="test" title="test" />

忽略 aspx，显然它会被替换为您首选的服务器脚本技术。然后，该处理程序可以通过为所有未知图像名称提供 missing.jpg 来处理不存在的图像名称。

除此之外，据我所知，您只能使用您提供的选项。任何在页面加载之前运行的 javascript 都存在不迭代尚未收到的 img 标签的风险，任何等待页面准备就绪的脚本都有可能让用户看到损坏的图像。

摇滚->你<-硬地