jQuery .error事件

Question

我知道這是一個蹩腳的問題，但似乎我在聖誕節期間讓我的大腦恢復工作時遇到了麻煩。

簡單的問題，我使用了jQuery .error事件中使用腳本的該位

$('#slideshowContainer img[name=imgStockItem]').error(function(){ 
     $(this).attr('src', '/assets/images/no-image-large.png'); 
    }); 

我真正想要做的是一樣的東西的if/else交易，其中，如果更換破碎的形象圖像被破壞做到這一點，否則，做到這一點。

我嘗試這樣做：

if($('#slideshowContainer img[name=imgStockItem]').error()){ 
      alert("true"); 
    } else { 
      alert("false"); 
    } 

但是，這只是返回真每次，破碎的形象或沒有。

有什麼想法嗎？

Answer 1

的.error()事件意味着..錯誤。

要知道圖像是否已成功加載，請處理.load事件。

現在來棘手的部分..要讓jQuery（或JavaScript一般）觸發任何這些事件，您將不得不手動分配圖像src否則它將「太晚」。

因此，有這樣的圖像標籤：

<img name="imgStockItem" my_src="image_source_here.png" /> 

然後這樣的代碼：

$(document).ready(function() { 
    $('#slideshowContainer img[name=imgStockItem]').each(function(index) { 
     $(this).error(function() { 
      $(this).attr('src', '/assets/images/no-image-large.png'); 
      $("#StatusDiv").append("image #" + (index + 1) + " is broken<br />"); 
     }); 

     $(this).load(function() { 
      $("#StatusDiv").append("image #" + (index + 1) + " loaded successfully<br />"); 
     }); 

     $(this).prop("src", $(this).attr("my_src")); 
    }); 
}); 

StatusDiv是用於示出各圖像的狀況容器只是例子。

Live test case。

Answer 2

我要去做出這樣的假設在這裏，但我認爲這也許您的問題

事件處理程序的瀏覽器觸發錯誤事件，這就是爲什麼例如安裝後的src屬性設置之前，必須附處理程序。

見http://api.jquery.com/error/

您必須附上當src被設置爲一次瀏覽器呈現它會使請求到定義源的元素的情況下，你的問題是，它引發的錯誤而且你還沒有抓到它，因爲處理程序在那時不適用。

你可以試試這個（將所有圖像標記之前的地方）：

$('#slideshowContainer').on({ 
    error: function() { 
     $(this).attr('src', '/assets/images/no-image-large.png'); 
    }, 
    load: function() { 
     // loaded successfully 
    } 
}, 'img[name=imgStockItem]');