好的,我正在使用高级自定义字段为具有延迟加载和灯箱的 Wordpress 制作砖石布局样式库。
我有灯箱 (fancybox-v3) 和砖石布局 (macy.js) 工作,但是当我添加延迟加载时,我遇到了问题。我正在使用 jQuery.lazy
这是我的循环
<?php
// check if the repeater field has rows of data
if( have_rows('card') ):
// loop through the rows of data
while ( have_rows('card') ) : the_row();
// display a sub field value inside a card
?> <div class="grid-item">
<?php
//VARIABLES//
$title = get_sub_field('card_title');
$childImage = get_sub_field('card_picture');
$file = get_sub_field('card_video');
$video = $file['url'];
// check for image
if( $childImage ): ?>
<a data-fancybox="gallery" data-caption="My caption" href="<?php
echo $childImage['url'];//big one here ?>">
<img class="lazy" data-src="<?php echo $childImage['url']; ?>">
</a>
<?php endif; ?>
//check for video
<?php if( $video ): ?>
<video class="gallery-video" loop autoplay>
<source src="<?php echo $video; ?>" type="video/mp4">
</video
<?php endif; ?>
</div> <?php
endwhile;
else :
// no rows found
endif;
?>
当我使用 jQuery.lazy 和 macy.js 运行它时,我得到了这样一个不稳定的视觉结果:
您在底部看到的是一堆相互重叠的图像,我猜这是因为它们被延迟加载,macy.js 不知道如何按高度将它们隔开。
虽然我不知道如何解决这个问题?有什么建议吗?
我还在这个问题上找到了这个答案 Masonry and Lazy load integration
by klasske 似乎回答了,但我不确定我是否理解它(我是一名刚接触编码的设计师)
基本上,Klasske 是说他们应该创建一个名为 adjustHeights 的新函数,然后在 jQuery.lazy 的选项中调用它,对吗?我不清楚。
最佳答案
我想发布这个问题的答案,因为 future 的人可能会遇到同样的问题。我联系了开发人员,基本上我需要在砌体布局上调用重新计算函数,该函数位于每次将新图像加载到屏幕时都会触发的函数内。
最后的样子是这样的:
var macy_instance = Macy.init({
container: '#grid',
trueOrder: false,
waitForImages: true,
debug: true,
margin: 0,
columns: 3,
breakAt: {
1200: 3,
940: 2,
520: 1
}
});
macy_instance.runOnImageLoad(function () { macy_instance.recalculate(true); }, true);
关于javascript - 如何正确堆叠砌体布局和延迟加载图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44599210/