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 中使用以下代码进行错误图像 src 加载

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

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