0

我正在使用lazysizes来延迟加载我的图像，但也正在尝试使用Packery，但我不知道如何在lazysizes 加载我的所有图片后触发Packery 脚本，因为它不会正确布置图片。这是我的代码

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

我希望它在lazysizes 将“lazyloaded”类添加到img 类后触发，因为它用lazyloaded 替换了lazyload。

<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 毫秒运行一次以检查条件是否满足。只要数量相同 - 您就会终止超时循环并触发打包。

// 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 回答