如何在LazySize加载图像后让Packery开火



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

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

我希望它在 lazysize 将类"lazyloaded"添加到 img 类后触发,因为它用 lazyload 替换了 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>

未测试,但如果我正确回答了您的问题,它应该像这样工作。您测试lazyload类(我使用默认类(的数量(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 );
});

相关内容

  • 没有找到相关文章

最新更新