Hiện tất cả hình ảnh chỉ sau khi tải hoàn toàn của họ

Question

Trong

<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> 

Tôi muốn hiển thị tất cả hình ảnh của id = "all-hình ảnh" chỉ khi tất cả các bức tranh trong id này sẽ được tải hoàn toàn (Jquery).

Và trước khi tải tất cả hình ảnh phần này cho thấy "Loading .." text

Answer 1

Giả sử div của bạn là pre-ẩn:

$("#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/

Hãy thử gắn một sự kiện handler tải đến bạn div "tất cả hình ảnh" Nếu API được tin cậy, sự kiện đó sẽ được kích hoạt khi tất cả các hình phụ được tải.

Vì vậy, tôi sẽ có một số loại trình xử lý văn bản. Sẽ ẩn hình ảnh của bạn và chèn văn bản "Đang tải ...", khi đó trình xử lý sự kiện tải sẽ hiển thị hình ảnh của bạn và xóa văn bản tải.

Hy vọng điều này sẽ hữu ích.