檢查圖像是否加載？

Question

我正在尋找一種方案，檢查所有圖像是否在圖像滑塊/旋轉器中使用之前加載。我正在考慮一種解決方案，只有在加載主圖像時才顯示圖像的按鈕或縮略圖，以防止用戶點擊未完整下載的圖像。

Answer 1

從.ready jQuery的文檔中的文本可能有助於使load和ready更明確的區分：

雖然JavaScript提供了當一個頁面渲染執行代碼的加載事件，此事件都直到所有資產（如圖像）完全收到纔會觸發。在大多數情況下，腳本可以在DOM層次結構完全構建後立即運行。傳遞給.ready（）的處理程序保證在DOM準備就緒後執行，因此這通常是附加所有其他事件處理程序並運行其他jQuery代碼的最佳位置。

...，然後從.load文檔：

負載事件被髮送到一個元件時，它和所有的子元件已經完全加載。這個事件可以發送到與URL相關的任何元素：圖像，腳本，框架，iframe和窗口對象。

所以.load是你在找什麼。這個事件最棒的地方在於你可以將它附加到DOM的一個子集。比方說，你有你的幻燈片圖片在這樣一個div：

<div class="slideshow" style="display:none"> 
    <img src="image1.png"/> 
    <img src="image2.png"/> 
    <img src="image3.png"/> 
    <img src="image4.png"/> 
    <img src="image5.png"/> 
</div> 

...那麼你可以使用.load只是在.slideshow容器觸發一次所有在容器中的圖像都已經加載，不管其他圖片在頁面上。

$('.slideshow img').load(function(){ 
    $('.slideshow').show().slideshowPlugin(); 
}); 

（我放在一個display:none只是作爲一個例子。而他們加載它會隱藏圖像。）

更新（2013年4月3日）
因爲jQuery的1.8版本這個方法已經過時

Answer 2

爲什麼不使用$(window).load()事件而不是通常的$(document).ready()創建滑塊/旋轉器，而不是檢查是否加載了所有圖像？ $(window).load()執行前等待頁面完成加載，包括圖像等資源。

請參閱：window.onload vs. body.onload vs. document.onready（也在Stack Overflow上）。

Answer 3

您可以觸發每個$('img').load()事件，並且只在您的負載觸發後啓用相關鏈接/點擊事件。如果某些圖片的加載時間較長，您仍然可以讓快速的圖片「可點擊」

$('img').load(function() { 
    // find the related link or click event and enable/add it 
});