wordpress - 未加载所有图像时停止 Masonry 重新调整大小

Question

我在 Wordpress 中使用 Masonry(和 imagesLoaded):

<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>

我的网站包含许多图像，大小在 1 到 8 MB 之间。我注意到加载时间很长(我在 Wordpress 上没有使用分页，所以页面会加载所有内容)并且网格会不断调整大小，直到所有图像都加载完毕。

有办法解决这个问题吗？

这是我的自定义 js:

$(document).ready(function() {

    let $masonryGrid = $('.masonry-grid');
    $masonryGrid.imagesLoaded(() => {
        $masonryGrid.masonry({
            columnWidth: '.grid-sizer',
            itemSelector: '.grid-item',
            gutter: 0,
            percentPosition: true,
            transitionDuration: 0
        });
    });
});

Answer 1

您可以为所有图像创建预览版本 - 尺寸相同，但质量大幅降低。也许上面有“正在加载”的文字或符号。

这些预览应该具有相同的文件名和后缀。你会有这样的图像对

image001.jpg
image001_thumb.jpg

然后各个图像元素将自动开始加载完整版本:

<img src="image001_thumb.jpg" onload="this.src=this.src.replace('_thumb','');" />

如果您不能像这样直接影响图像元素，请将其添加到您的自定义 .ready 函数中(这是一个会影响所有图像的示例，只是为了给您一个想法，您必须仅过滤掉网格内的图像)

var images = document.getElementsByTagName('img');
for(var i=0;i<images.length;i++){
 // If the image is already loaded, change it immediately
 if(images[i].naturalWidth != 0) images[i].src = images[i].src.replace('_thumb','');
 else // If not, give it an onLoad function to change after it does
 images[i].onload = function(){
  this.src = this.src.replace('_thumb','');
 }
}