Mutliple imagesLoaded函數css調用問題

Question

當我有兩個使用Imagesloaded的函數時，我的預加載器不顯示。當我禁用在一個圖像加載時工作正常。需要有能力使用三個或四個依賴。

我的預加載器div和SCSS。

<div class="masonry-loading"> 
    <img src="<?php echo get_template_directory_uri(); ?>/library/images/ajax-loader.gif" /> 
</div> 

.masonry-loading {padding:10% 0 10% 50%;} 
img {border:0 !important;} 

這裏是我的不同列的功能。

// Masonary 
$(document).ready(function() { 
    var $container = $('.masonry-c'); 
    var min_width = 230; 
    $('.masonry-c').hide(); 
    $container.imagesLoaded(function() { 
     $('.masonry-c').fadeIn('fast'); 
     $("div.masonry-loading").css({ 
      'display': 'none' 
     }); 
     $container.masonry({ 
      itemSelector: '.masonry-box', 
      isAnimated: true, 
      columnWidth: function (containerWidth) { 
       var box_width = (((containerWidth)/3) | 0); 

       if (box_width < min_width) { 
        box_width = (((containerWidth)/2) | 0); 
       } 

       $('.masonry-box').width(box_width); 

       return box_width; 
      } 
     }); 
    }); 
}); 

// Masonary 
$(document).ready(function() { 
    var $container1 = $('.masonry-four-c'); 
    var min_width = 200; 
    $('.masonry-four-c').hide(); 
    $container1.imagesLoaded(function() { 
     $('.masonry-four-c').fadeIn('fast'); 
     $container1.masonry({ 
      itemSelector: '.masonry-four-box', 
      isAnimated: true, 
      columnWidth: function (containerWidth) { 
       var box_width = (((containerWidth)/4) | 0); 

       if (box_width < min_width) { 
        box_width = (((containerWidth)/3) | 0); 
       } 
       if (box_width < min_width) { 
        box_width = (((containerWidth)/2) | 0); 
       } 

       $('.masonry-four-box').width(box_width); 

       return box_width; 
      } 
     }); 
    }); 
}); 

下面我把CSS刪除裝載機，出於某種原因，當我在上面imagesLoaded後的函數加載它，這並不工作。也許如果我能夠完成這項工作，它可以解決問題。

function triggerCallback() { 
    callback.call($this, $images), 
    $("div.masonry-loading").css({'display': 'none'}); 
} 

試過了一堆東西，我敢打賭這件事很簡單。無論如何，幫助將不勝感激。

Answer 1

使用，

$('myelement').load(function(){ 
//when your element/img is loaded then this code will run. 
//hide/show whatever u want 
});