0

lazysizesを使用して画像を遅延読み込みしていますが、Packeryも使用しようとしています。lazysizes がすべての写真を読み込んだ後に、Packery スクリプトを起動する方法がわかりません。写真が正しくレイアウトされないからです。これは私が持っているコードです

<script>
// initialize Packery
var $container = $('#container');
// init
$container.packery({
itemSelector: '.item', percentPosition: true,
}); 
</script>

lazysizesがクラス「lazyloaded」をimgクラスに追加した後に起動したいのは、lazyloadをlazyloadedに置き換えるからです。

<div class="card-image waves-effect waves-block waves-purple">
            <a href="#image-1"> <img data-sizes="auto" data-srcset="Photos/kirby-thumb.jpeg 350w, Photos/kirby-thumb-med.jpeg 500w, Photos/kirby-thumb-lrg.jpeg 750w" data-src="Photos/kirby-thumb.jpeg" class='responsive-img lazyload' id="thumbnail">
          </div>
          <div class="card-content blue-grey">
            <span class="card-title activator grey-text text-darken-4">Kirby</span>

          </div>
          </a>
4

1 に答える 1

0

テストされていませんが、あなたの質問が正しい場合は、次のように動作するはずです。レイジーロード クラス (デフォルト クラスを使用)の量 ( array.length) が「ロードされた」クラスと同じかどうかをテストします。このテストをタイムアウト ループに入れて、スクリプトが X ミリ秒ごとに実行され、条件が満たされているかどうかを確認します。量が同じになるとすぐに、タイムアウトループを強制終了し、packery をトリガーします。

// simple test - in case your orginial selector is lazyload
// the amount of lazyload and lazyloaded has to be the same.

function testAllLoaded() {
    return ($('.lazyload').length === $('.lazyloaded').length);
}

var testDelay = 10; // timeout in milliseconds 


$().ready(function() {
    // ask until test is fullfilled...
    var $container = $('#container');
    var fire = setTimeout(function() {
        // all loaded
        if(testAllLoaded()) {
            // run packery
            $container.packery({
                itemSelector: '.item', percentPosition: true,
            });
            // kill timer
            clearTimeout(fire);
        }
    } , testDelay );

});
于 2016-02-16T10:11:55.620 に答える