无法让LazyLoad和onerror在图像上一起工作

Question

我的页面上有一些图片：

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

如果无法加载图片（例如因为abc.jpg不存在），那么我会显示＆＃34;默认＆＃34;而不是图像：

<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

使用＆＃34;出现＆＃34; lazyload js中的选项。在延迟加载js中使用以下代码进行错误图像加载

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

当在视口中提供图像时，此函数用data-original替换src。如果未加载数据原始图像URL，则加载错误图像。