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','');
 }
}

Answer 2

为了获得更好的体验，也许您可以尝试在其图像加载后显示每个项目。

请参阅有关Masonry文档的extra exemples section

在加载每个图像后迭代显示项目。请参阅issue #501
上的说明

当并非所有图像都被加载时，停止砌体重新调整大小

2 个答案: