多个imagesLoaded函数css调用问题

Mutliple imagesLoaded functions css call issue

本文关键字:调用 问题 css 函数 imagesLoaded 多个      更新时间:2023-09-26

我的preloader不显示当我有两个函数使用Imagesloaded。当我禁用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'});
}

尝试了很多东西,我打赌是一些简单的东西。无论如何,帮助将非常感激。

使用,

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