無法獲得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中使用「出現」選項。當圖像是在視口avaible由數據原來使用懶惰負載JS下面的代碼用於在誤差圖像的src裝載

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

該功能替換SRC。如果數據原始圖像url未加載，則會加載錯誤圖像。