將image.src設置爲自身會導致onLoad觸發嗎？

Question

我似乎無法找到一個明確的答案，這一個...

假設我有一個JavaScript參考頁面上的圖像和我綁定一個load事件處理該元素。例如，像這樣：

---

HTML

<img id="myImage" src="http://example.com/image.jpg" /> 

的JavaScript

var $myImage = $('#myImage'); 
$myImage.load(function() { 
    alert('Image loaded!') 
}); 

---

現在，如果我這樣做：

var imageElem = $myImage[0]; 
imageElem.src = imageElem.src; // Re-assign the image source path 

...將load事件處理程序火災即使圖像已經從服務器加載？這似乎是在Firefox中做的，但依靠這種行爲安全嗎？

（我問的原因是我已經看到這個在jQuery插件中用於檢查所有圖像何時被加載，如果圖像在load事件處理程序被綁定之前加載，那麼它將不會觸發，除非它使用上面的方法重新觸發。）

Answer 1

設置img.src應觸發加載，但有一些注意事項。根據jQuery的自己documentation regarding the .load event，與圖像一起使用時

加載事件的注意事項

的常見挑戰開發者嘗試使用.load（） 快捷方式被執行的功能來解決時的圖像（或收集的 圖像）已完全加載。有幾個已知的注意事項 這應該注意。它們是：

• 這並不一致，也不可靠地工作，跨瀏覽器的
• 它不正確的WebKit如果圖像src爲
• 一點也沒有之前設置爲相同的SRC作爲 火」牛逼正確冒泡DOM樹
• 可以停止火已經生活在瀏覽器的緩存圖片

Answer 2

在Chrome中檢查這檢查：

> img = document.createElement('img') 
    <img>​ 
> img.addEventListener('load', function(e) {console.log('loaded');}); 
    undefined 
> img.src = 'http://placekitten.com/200/300'; 
    "http://placekitten.com/200/300" 
    loaded 
> img.src = 'http://placekitten.com/200/300'; 
    "http://placekitten.com/200/300" 
> img.src = 'http://placekitten.com/200/30'; 
    "http://placekitten.com/200/30" 
    loaded 
> img.src = 'http://placekitten.com/200/300'; 
    "http://placekitten.com/200/300" 
    loaded 
> img.src = 'http://placekitten.com/200/300'; 
    "http://placekitten.com/200/300" 

因此，爲了與關於回答Chrome瀏覽器 - 不，除非你先否則將src設置的東西。

Answer 3

我也有這個問題，並找到了一個簡單的解決方案。

您可以通過替換源屬性多次觸發加載的事件。即使該值等於現有的來源。你只需要添加一個不同的參數，服務器會忽略這個參數。

看看這個例子：

var source = "http://example.com/image.jpg"; 
var imageElement = document.createElement('img'); 
imageElement.src = source + "?ignorethis=" + new Date().getTime(); // loaded 
imageElement.src = source + "?ignorethis=" + new Date().getTime(); // loaded again 

我知道，這是一個有點髒，但工程跨瀏覽器。