2

Imagesloaded を使用する 2 つの関数がある場合、プリローダーが表示されません。1 つに読み込まれた画像を無効にすると、正常に動作します。場合によっては 3 つまたは 4 つを使用する能力が必要です。

私のプリローダー 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 に答える