我正在使用懒惰的大小来延迟加载我的图像,但也在尝试使用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 );
});