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

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

我想到的一个想法是在您的Web服务器上创建一个图像处理程序,即

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

忽略aspx,显然它会被你喜欢的服务器脚本技术所取代.然后,该处理程序可以通过为所有未知图像名称提供missing.jpg来处理不存在的图像名称.

除此之外,就我所看到的那样,你会坚持使用你给出的选项.在页面加载之前运行的任何javascript都有可能无法迭代尚未收到的img标记,并且任何等待页面就绪的脚本都会冒着用户看到损坏图像的风险.

岩石 - >您<-Hardplace