jquery div khi tất cả các hình ảnh được tải

Question

tôi có thể tải một hình ảnh khi nó được nạp, bằng cách thực hiện:

<img style="display:none;" src="big3.jpg"> 
<script type="text/javascript"> 
    $('img').load(function(){ 
     $(this).css({'display':'block'}) 
    }); 
</script> 

Nhưng những gì tôi muốn là để nạp div khi tất cả img được nạp, nhưng điều này không làm việc, tại sao? :

<div style="display:none;"> 
    <img src="big3.jpg"> 
</div> 
<script type="text/javascript"> 
    $('div').load(function(){ 
     $(this).css({'display':'block'}) 
    }); 
</script> 

Answer 1

Như @Kolink cho biết, các div không tải. Mã này sẽ hiển thị div khi tất cả các hình ảnh bên trong div đã được tải. (chưa được kiểm tra)

var $images = $('div img'); 
var loaded_images_count = 0; 

$images.load(function(){ 
    loaded_images_count++; 

    if (loaded_images_count == $images.length) { 
     $("div").show(); 
    } 
}); 

Answer 2

<div> yếu tố không tải, hình ảnh. Bạn muốn nghe khi tải hình ảnh, và sau đó nhận được <div> và hiển thị nó.

Answer 3

Tôi biết quá muộn để trả lời câu hỏi này nhưng với bất kỳ ai xem chủ đề này, có một plugin jQuery đơn giản và dễ sử dụng với nhiều thủ thuật khác để thực hiện công việc. You can check it out here. sau đó để kiểm tra tất cả tải hình ảnh, bạn chỉ cần thực hiện việc này

$('#container').imagesLoaded() 
    .always(function(instance) { 
    console.log('all images loaded'); 
    })