未加载所有图像时停止 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

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

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

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

Iteratively reveal items after each image is loaded. See explanation on issue #501

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

Stop Masonry re-sizing when not all images are loaded

wordpress

masonry