Sự kiện xây dựng: Sự kiện gọi sau khi hình ảnhĐược tải và bố cụcComplete

Question

Vì vậy, đây là những gì tôi đang cố gắng làm. Tôi có một mạng lưới với rất nhiều hình ảnh, vì vậy tôi đang sử dụng thư viện imagesLoaded cùng với khối xây.

Dưới đây là CSS của tôi:

.grid { 
    opacity:0; 
} 

Và HTML:

<div class="grid"> 
    <div class="grid-sizer"></div> 
    <div class="gutter-sizer"></div> 
    <div class="item">image</div> 
    <div class="item">image</div> 
    <div class="item">image</div> 
</div> 

Và đây là JS của tôi:

var $container = $('.grid'); 
// initialize Masonry after all images have loaded 
$container.imagesLoaded(function() { 
    $container.masonry({ 
     columnWidth: '.grid-sizer', 
     itemSelector: '.item', 
     gutter: '.gutter-sizer' 
    }); 
    $container.masonry('on', 'layoutComplete', function(){ 
     console.log('got here'); 
     $container.animate({'opacity':1}); 
    }); 
}); 

Mục tiêu của tôi là phải có lưới ẩn cho đến khi tất cả các hình ảnh được tải và cách bố trí hoàn tất, sau đó làm mờ nó. Vì một số lý do trong mã của tôi ở trên, nó không bao giờ đi vào layoutCom khối plete.

Nếu tôi di chuyển khối đó bên ngoài hình ảnhĐược tải, $ container.masonry không xác định điểm đó.

Bất kỳ ý tưởng nào?

FIDDLE HERE

Nếu bạn thay đổi opacity lưới tới 1 bạn có thể nhìn thấy mọi thứ đều bị sa thải ra tốt đẹp. Chỉ cần cố gắng tìm hiểu cách để bố cụcComplete để gọi để đặt độ mờ thành 1.

Answer 1

Bạn không cần sử dụng sự kiện layoutComplete trên khối xây. Như bạn có thể chỉ cần thêm mã hoạt hình của bạn dưới khởi tạo nề.

Khi tất cả hình ảnh được tải, chức năng imageLoaded sẽ thực thi. Sau đó bạn có thể tạo ra các đối tượng nề và animate ngay lập tức như vậy:

var $grid = $('.grid').imagesLoaded(function() { 
// init Masonry after all images have loaded 
$grid.masonry({ 
    columnWidth: 200, 
    itemSelector: '.item', 
    gutter: 10 
}); 
console.log('got here'); 
    $('.grid').animate({'opacity':1}); 
}); 

Đây là một jsfiddle đó chứng minh rằng

Answer 2

jQuery(document).ready(function($){ 

    var wdm_wait = function(){ 

      jQuery("body").find("img").each(function(i) { 

        if(!this.complete) 
        { 
         return false; 
        } 

      }); 
       // when code reaches here Its assured that all the images are loaded 
     clearInterval(waiting); 
     console.log('got here'); 
     var $container = $('.grid'); 

    // initialize Masonry after all images have loaded 
     $container.masonry({ 
      columnWidth: 100, 
      itemSelector: '.item', 
      gutter: 10 
     }); 
    $container.animate({'opacity':1}); 
} 

      waiting = setInterval(wdm_wait,100); 


}); 

Điều này chắc chắn sẽ đảm bảo rằng mã js của bạn thực hiện chỉ sau khi tất cả những hình ảnh có đã được tải (hiển thị)

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

Answer 3

có bao giờ bạn thử thế này, tôi nghĩ rằng đây là câu trả lời của bạn

var $container = $('.grid').masonry({ 
     columnWidth: 200, 
     itemSelector: '.item', 
     gutter: 10 
    }); 
    $container.masonry('on', 'layoutComplete', function() {  
     $container.animate({'opacity':1}); 
    }); 
$container.masonry();