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

Question

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

到目前为止我的方法：

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

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

Answer 1

您对此进行了标记，jQuery因此我认为这是一个选项。

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

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

它简单、直接，适用于所有现代浏览器。

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

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

由于您已经有一个“alt”属性，这对于无法显示图像的系统和 SEO 来说是可以的。如果您愿意，可以使用placehold.it替换图像，但我认为不需要（这取决于您的用例）。您甚至可以.hide()使用图像或玩它。