2011-09-07 63 views
12

顯示所有圖片後,才完成自己的負載

<div id="all-images"> 
    <img src="images/1.jpg"> 
    <img src="images/2.jpg"> 
    <img src="images/3.jpg"> 
    <img src="images/4.jpg"> 
    <img src="images/5.jpg"> 
    <img src="images/6.jpg"> 
</div> 

我想顯示ID的所有圖像=「所有圖像」,只有當這一切ID中的圖像將完全加載(jQuery的)。

和加載所有圖像在此之前部分顯示「正在加載...」文本

+2

@JMax - 據我所知,這不是一個騙局。 – karim79

+0

@ karim79:這是真的,我已經看到你的答案,我已經快速閱讀這個問題 – JMax

回答

19

假設你的DIV是預藏:

$("#loadingDiv").show(); 
var nImages = $("#all-images").length; 
var loadCounter = 0; 
//binds onload event listner to images 
$("#all-images img").on("load", function() { 
    loadCounter++; 
    if(nImages == loadCounter) { 
     $(this).parent().show(); 
     $("#loadingDiv").hide(); 
    } 
}).each(function() { 

    // attempt to defeat cases where load event does not fire 
    // on cached images 
    if(this.complete) $(this).trigger("load"); 
}); 
+0

我認爲這解決了我的問題謝謝 – sujal

+0

真的很有用...謝謝 –

0

http://api.jquery.com/load-event/

嘗試連接的負載事件處理程序到您的「全圖」分區。如果API是可信的,那麼在加載所有子圖像時將觸發該事件。

所以我會有一些document.onready處理程序,它會隱藏您的圖像,並插入「正在加載...」文本,然後您的加載事件處理程序將顯示您的圖像並刪除加載文本。

希望這會有所幫助。

相關問題