檢查圖像是否加載？

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

2011-03-24 3D-kreativ

可能重複[如何確定圖像是否已加載，使用Javascript/jQuery？]（http://stackoverflow.com/questions/263359/how-can-i-determine-if-an-image- has-loaded-using-javascript-jquery） – 2013-06-28 22:36:40

從.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版本這個方法已經過時

來源

2011-03-24 19:26:30 markquezada

他們爲什麼會貶低這麼好的功能？ * arg *現在我們必須使用一個7kb的文件，例如http://www.desandro.github.io/imagesloaded/ :( – ItsMeDom 2013-06-13 16:27:32

@DoJoChi其實，我不認爲你必須加載另一個文件。從文檔中，替換''.load''使用''.on''（http://api.jquery.com/on/）的適當參數，例如''.on（'load'，handler）'' – Nathan 2013-06-17 21:40:02

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

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

來源

2011-03-24 18:56:05

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

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

來源

2011-03-24 18:58:14 Kelsey

然後我必須爲每個圖像使用一個ID？ – 2011-03-24 19:09:53

@ user637364你可以或如果你的圖像包裹在標籤你可以只引用容器。你也可以在img和錨等之間共享css名字......有很多關於img的選項。 – Kelsey 2011-03-24 19:40:08

檢查圖像是否加載？

回答

相關問題