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

Question

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

到目前为止我的方法：

• 使用<img>标记的<img>标记的onerror和onload处理程序<{3}}
• 使用here展示所有损坏的图片

我将非常感谢有关此的任何指导方针/意见/最佳做法。 此外，如何在遗留系统中优雅地回退，而我无法处理ALT元素上的事件。 图片已具有{{1}}属性，因此可以跳过这些行的指南。

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()图像或使用它。