javascript - 如果图像未正确加载，如何显示默认图像？

Question

我想出了 this solution (jsfiddle) - 实现 $.error 函数并更改图像 src 属性，但接缝处并不总是调用此函数，有时我会得到此 带有 alt 文本而不是我提供的图像。我使用这个 jquery 代码来更新图像:

$(document).ready(function() {
    $('img').error(function () {
        var defaultSrc = $(this).data('default-src');
        $(this).attr('src', defaultSrc);
    });
});

data-default-src 属性也为每个图像提供。有没有更高级更确定的jquery解决方案？

Answer 1

我认为您会发现即使是 $(document).ready 事件也可能来不及将 .error 处理程序附加到 img。在附加处理程序之前，错误事件可能已经发生。

作为解决方法，您可以确保在 .error 处理程序到位之前不设置图像的 src，例如，像这样:

HTML

<img id="1" data-src="/bad/path/to/image" data-default-src="good/path/to/image" />

Javascript

$(document).ready(function() {
    $('img').on('error', function () {
        this.src = $(this).data('default-src');
    }).each(function() {
        this.src = $(this).data('src');
    });
});

Demo