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

Question

在

<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的）。

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

Answer 1

假設你的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"); 
}); 

Answer 2

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

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

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

希望這會有所幫助。