Question

我正在使用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>

Answer 1

未经测试但如果我的问题是正确的，它应该像这样工作。您测试lazyload类（我使用默认类）的金额（array.length）是否与＆＃39;已加载＆＃39;相同。类。您将此测试置于超时循环中，因此脚本每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 );

});

如何在LazySizes加载图像后激活Packery

1 个答案: