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

所以看起来很安静的几种方法来处理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（源）需要在头部赶错误，减缓用户遇到加载时间

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

优点：可以放在任何地方在页面上，无论何时运行，都不会影响用户的速度s经验加载时间缺点：显示一个破损的图像，直到它运行创建一个糟糕的用户体验

在我的情况加载时间是最大的问题，但我不能得到最后的选择，正确地在IE中工作，因为它改变了破并没有破碎的图像一样！

干杯，丹尼斯

来源

2010-01-12 Denis Hoctor

一个想法，它的弹簧想到的是，在你的web服务器上创建的图像处理程序，即

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

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

除此之外，您坚持使用您所提供的选项，只要我能看到。在页面加载之前运行的任何JavaScript都无法迭代尚未收到的img标记，并且任何等待页面准备就绪的脚本都将冒着用户看到破碎图像的风险。

岩石 - >您< -Hardplace

来源

2010-01-12 16:51:14 Lazarus

这个答案的变化可能让对常见的图像文件扩展名的ISAPI过滤器/ Apache的国防部处理的请求，这样你就不必改变所有IMG SRC属性指向你的处理程序。 – grenade 2010-01-12 16:55:41

我同意这一点。如果我坚决修复损坏的图像，通用处理程序将是我的选择。 – CeejeeB 2010-01-12 16:56:46

这可能是我选择使用MVC的一种选择，但我希望我可以在服务器端保持简单！ – 2010-01-12 17:00:26

在我看来，使用alt标签是足够的，而且也没有必要通过使用javascript每次检查它添加复杂的页面。

当然，你需要检查每一个有一段时间，你没有破碎的图像。 There are tools to do it。

来源

2010-01-12 16:51:39 marcgg

如果我们没有客户/老板，而且外表并非一切都不好：D – 2010-01-12 16:59:41

@marcgg不赞同。在很多情况下，占位符图像可以为页面的美学作出贡献。例如，产品目录可能包含许多尚未提供图像的产品。然后，智能丢失的图像处理程序可以用产品的正确类别替换通用产品图像。 – grenade 2010-01-12 17:04:24

这真的很不错... – marcgg 2010-01-12 17:04:31

理想情况下，应该只使用alt标签。如果这是至关重要的JavaScript解决方案真的不理想，因为如果JS关闭它不会工作。但是，你可以做一些服务器端解决方案。在PHP中的东西可以这样做，但会需要一个数据库或某种方式来设置变量。

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

来源

2010-01-12 17:06:39 Chad

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

回答

相关问题