html - 无法让 LazyLoad 和 onerror 一起处理图像

Question

我的页面上有一些图片:

<img src="http://www.abc/images/abc.jpg" />

如果无法加载图像(例如，因为 abc.jpg 不存在)，那么我会改为显示“默认”图像:

<img src="http://www.abc/images/abc.jpg" onerror="this.src='http://www.abc/images/default.jpg'" /> 

如果我添加 LazyLoad到我的图像并加载一个更轻量级的默认图像，它变成:

<img
    class="lazy"
    data-original="http://www.abc/images/abc.jpg"  
    src="http://www.abc/images/graydefault.jpg"
    onerror="this.src='http://www.abc/images/default.jpg'" /> 

现在，当页面加载时，它会先加载轻量级图像，然后再加载实际图像。

但是如果实际图像不存在怎么办？轻量级默认图像将保留在那里，但这不是我想要的:

如何在出错时加载我的默认图像 (default.jpg)？

PS:默认图片很重，所以我想避免将其作为默认图片加载。

Answer 1

在 lazyload js 中使用“出现”选项。在延迟加载js中使用如下代码进行on-error图片src加载

appear: function(ele,settings)
{
    $(ele).attr("src",$(ele).attr("data-original"));
}

当图像在视口(viewport)中可用时，此函数将 src 替换为 data-original 。如果未加载数据原始图像 url，则加载错误图像。