javascript - 图像发布受限图像的最佳实践

Question

在我的用例中，我必须将图像发布到网站。但是，图像可能会在一段时间内受到限制。在此期间显示损坏图像的最佳做法是什么？

到目前为止我的方法:

• 使用 <img> 的 onerror 和 onload 处理程序标记为 here
• 使用placehold.it放置所有损坏的图像

我将非常感谢关于此的任何指南/意见/最佳实践。此外，我如何优雅地回退到无法处理 <img> 事件的遗留系统？元素。图片已经有ALT属性，因此可以跳过这些行的指南。

Answer 1

你用 jQuery 标记了它，所以我认为这是一个选项。

最简单的解决方案确实是检测错误并在这种情况下替换图像:

$('img.myChangingImageClass').error(function(){
        $(this).attr('src', 'notavailableYet.png');
});

它简单明了，适用于所有现代浏览器。

Matt 建议使用事件委托(delegate)，如果您稍后可能要添加图像，这会很有用。此外，它为整个页面附加一个事件，而不是为每个图像附加一个事件。这可以通过以下方式完成:

$(document).on('error', 'img.myChangingImageClass', function () {
    $(this).attr('src', 'notavailableYet.png'); 
});

因为您已经有了一个“alt”属性，它适用于无法显示图像的系统和 SEO。如果您愿意，可以使用 placehold.it 作为替换图片，但我认为没有必要(这取决于您的用例)。您甚至可以.hide() 图像或使用它。