javascript - 多个 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
});