砌體事件：在圖像加載和佈局完成後調用事件

所以這就是我想要做的。我有一個很多圖像的網格，所以我使用圖像加載庫和砌體。砌體事件：在圖像加載和佈局完成後調用事件

這裏是我的CSS：

.grid { 
    opacity:0; 
}

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

這是我的JS：

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}); 
    }); 
});

我的目標是讓電網隱藏，直到所有圖像都加載並且佈局已完成，然後淡入其中。出於某種原因，在我上面的代碼中，它永遠不會進入layoutcom完整的塊。

如果我將該塊移動到imagesLoaded之外，$ container.masonry未定義該點。

任何想法？

FIDDLE HERE

如果您更改網格的不透明度爲1，你可以看到一切都越來越奠定了罰款。只是想弄清楚如何讓layoutComplete調用將不透明度設置爲1.

來源

2015-02-06 Corey

您不需要在砌體上使用layoutComplete事件。因爲您可以在砌體初始化下添加您的動畫代碼。

加載所有圖像後，將執行imageLoaded函數。然後，您可以創建砌築體和動畫馬上像這樣：

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}); 
});

這裏是一個jsfiddle這表明

來源

2015-07-27 16:57:11 jumojer

這似乎在搗鼓工作，但似乎奇怪了吧。看起來''console.log'可以在圖像加載之後但砌體完成佈局之前觸發。我將不得不測試更多更大的圖像。 – Corey 2015-07-27 17:10:58

我會在你的測試中推薦大量的圖片，因爲我懷疑圖片尺寸會影響石工，因爲他們已經加載 – jumojer 2015-07-27 18:59:43

經過一番研究，我還沒有找到任何證據表明masonry（）調用是非阻塞的。所以這意味着該函數會在佈局完成之前執行。所以每一次，動畫都會在佈局完成後使用我提供的代碼執行。 – jumojer 2015-07-28 13:56:23

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


});

這肯定會保證你的js代碼執行後，纔在所有影像已加載（呈現）

希望這有助於！ :)

來源

2015-07-28 10:22:59 WisdmLabs

@Corey，我猜你甚至都沒有試過我的。即使這樣也能確保砌體在所有圖像（不僅僅是網格中的全部圖像）都被加載之後才被初始化。查看小提琴鏈接 https://jsfiddle.net/725nywx4/17/ – WisdmLabs 2015-08-04 05:43:29

你有沒有嘗試這一個，我覺得這是你的答案

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

來源

2015-08-03 14:27:09 kalkanbatuhan

砌體事件：在圖像加載和佈局完成後調用事件

回答

相關問題