未加载所有图像时停止砌体调整大小答案

【问题标题】：Stop Masonry re-sizing when not all images are loaded未加载所有图像时停止砌体调整大小
【发布时间】：2017-01-19 19:41:07
【问题描述】：

我在 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
        });
    });
});

【问题讨论】：

压缩图片tinypng.com
谢谢，作为 Masonry 的一部分，我还能做些什么吗？
您添加了imagesLoaded 库吗？ imagesloaded.desandro.com Masonry 中不包含，需要单独包含。
是的，包括在内
大小超过 500KB 的图像可能会有很大的问题，8MB 对于网络图像来说实在是太多了。您的网站将在加载时停止，如果加载时间超过 5-10 秒，用户将离开...

标签： wordpress masonry

【解决方案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','');
 }
}

【讨论】：

【解决方案2】：

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

请参阅 Masonry 文档上的 extra exemples section

在加载每个图像后迭代地显示项目。见issue #501的解释

【讨论】：