1

imagesLoadedプラグインの遅延メソッドに頭を悩ませているようには見えません。私の特定のケースでそれを使用する方法がわかりません。JSONを使用して外部ソースから写真を取得しています。すべてが#photographsに読み込まれます。すべての写真をロードしている間（大きなローダーアニメーションを表示している間）、すべてが非表示になっていることを実現したいと思います。15枚の写真が読み込まれたら、大きな読み込みアニメーションを削除して小さなアニメーションを表示し、残りの写真を読み込み続けます。すべての写真が読み込まれたら、小さな読み込みアニメーションを非表示にします。

私は次のコードを持っていますが、コールバックはすべてがロードされたときにのみ呼び出されるため、もちろん間違っています。.progress（）メソッドを探しています。

$('#photographs').imagesLoaded(function($images) {
        var totalAmount = $images.length;
        if(($images.length) > 15) {
            $("#photographs, #loader").fadeIn("fast");
            $("#bigloader").fadeOut("fast");
            $("#photographs").gridalicious({
                gutter: 2,
                animate: true,
                effect: 'fadeInOnAppear',
                width: 430,
                complete: onComplete()
            });
        } else if(($images.length) == totalAmount) {
            $("#loader").fadeOut("fast");
        };
    });

このようなもの？

var dfd = $("#photographs").imagesLoaded();

    dfd.progress(function( isBroken, $images, $proper, $broken ) {
        var totalAmount = $images.length;

        if(($proper.length) > 15) {
            $("#photographs, #loader").fadeIn("fast");
            $("#bigloader").fadeOut("fast");
            $("#photographs").gridalicious({
                gutter: 2,
                animate: true,
                effect: 'fadeInOnAppear',
                width: 430,
                complete: onComplete()
            });
        }
    });

編集：進行状況に関する情報はここで見つけることができますhttps://github.com/desandro/imagesloaded

4

2 に答える 2

0

画像が読み込まれるたびにハンドラーが起動されるように、画像自体にハンドラーをアタッチする必要があります。

var loaded = 0;
var totalAmount = $('#photographs img').length;

$('#photographs img').each(function() {
    loaded;
    $(this).imagesLoaded(function($images) {
        loaded++;
        if (loaded > 15) {
            // stuff to do when more than 15 images
        } else if (loaded == totalAmount) {
            // stuff to do when all images loaded
        };
    });
});
于 2013-01-03T19:51:54.217 に答える