2

当我有两个使用 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'});
}

尝试了一堆东西，我打赌它很简单。无论如何，我们将不胜感激。

4

1 回答 1

0

利用，

$('myelement').load(function(){
//when your element / img is loaded then this code will run.
//hide/show whatever u want
});
于 2013-04-03T07:35:53.650 回答