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');
});

优点：非常少的代码，可以在不改变标记的情况下处理所有图像，可以放在头部之外缺点：可能会错过错误事件，具体取决于页面onload事件的速度，减慢用户经历的加载时间

$(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标记，并且任何等待页面就绪的脚本都会冒着用户看到损坏图像的风险。

岩石 - ＆gt;您＆LT; -Hardplace

Answer 2

在我看来，使用alt标记就足够了，每次使用javascript时都不需要通过检查来增加页面的复杂性。

当然，您需要每隔一段时间检查一下您是否有破损的图像。 There are tools to do it

Answer 3

理想情况下，只应使用alt标签。如果这是至关重要的，那么javascript解决方案实际上并不理想，因为如果JS关闭它将无法正常工作。但是，你可以做一些服务器端解决方案。 php中的某些内容可以像这样完成，但需要数据库或某种设置变量的方式。

<?php
if($image !== ''){?> 
<?php echo '<img src="$imgsrc" alt="$imgalt" />' ?>
}
<?php else {
<?php echo '<img src="$imgmissing" alt="$imgalt" />' ?>
} ?>
<?php } ?>

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

3 个答案: