使用的onError兩次

Question

是否存在，如果第一onError的不存在

<img class="media-object img-responsive" src="/img/product/{{ product_type_slug }}/thumb/{{ image_thumb }}" alt="{{ name }}" 
onError=" 
this.onerror=null; 
this.src='/img/product/swatch/{{ image }}';"> 

尋找一個onerror的使用onError的兩倍的方式爲onError的展現：

src='/img/product/{{ product_type_slug }}/old/{{ image_thumb }}' 

所以，如果原來的圖像不存在顯示樣本網址，如果不存在顯示舊的。

Answer 1

你可以使用JavaScript函數來處理這種情況下

function loadAlternative(element, list) { 
 
    var image = new Image(); 
 

 
    image.onload = function() { 
 
    element.src = this.src; 
 
    } 
 

 
    image.onerror = function() { 
 
    if (list.length) { 
 
     loadAlternative(element, list); 
 
    } 
 
    } 
 

 
    // pick off the first url in the list 
 
    image.src = list.shift(); 
 
}

<img src="nope.jpg" 
 
    data-alternative="njet.jpg,neither.jpg,http://lorempixel.com/400/200/technics/1/" 
 
    onerror="loadAlternative(this, this.getAttribute('data-alternative').split(/,/))">

這裏做的事情：

• 您設置一個錯誤處理程序加載的替代圖像
• 您在中提供替代項作爲逗號分隔列表屬性
• 如果onerror被觸發時，loadAlternative函數被調用，這兩個元件（img）和data-alternative列表作爲陣列
• 只要該圖像不能被加載並且存在另一個在列表中，它會重複這個過程
• 一旦圖像加載，將在element

---

設置爲src如果你需要一些默認圖像使用都應該替代失敗，您可以修改image.onerror函數來處理一個空列表如下：

image.onerror = function() { 
    if (list.length) { 
     loadAlternative(element, list); 
    } 
    else { 
     element.src = '/every/other/option/has/failed.jpg'; 
    } 
    } 

---

請注意，你可以（在網絡上，這意味着：你會 ）最終會嘗試加載圖像，這可能通過讓服務器檢查圖像的存在來防止。