Bootstrap 5瀑布流图片画廊首次加载堆叠问题及ImagesLoaded报错求助

嘿，我看到你遇到的问题了——首次加载时图片堆叠，还伴随着ImagesLoaded的报错，先别着急，咱们一步步来解决：

首先分析报错原因：Uncaught TypeError: h is not iterable #

你用的是ImagesLoaded v5，这个版本已经移除了对jQuery插件的支持，所以你原来用$('#gallery').imagesLoaded()这种jQuery链式调用的方式就会报错，因为jQuery对象不是v5版本ImagesLoaded期望的可迭代DOM元素集合。

解决步骤 #

1. 调整ImagesLoaded的调用方式（改用原生JS）

把你的js/waitimg.js里的代码改成原生JavaScript的调用方式，直接传入DOM元素：

// 先获取画廊容器
const gallery = document.getElementById('gallery');
// 用原生方式调用ImagesLoaded
imagesLoaded(gallery, function() {
  // 图片加载完成后初始化Masonry
  new Masonry(gallery, {
    itemSelector: '.gallery-item',
    percentPosition: true,
    transitionDuration: '0.3s', // 注意：Masonry v4里isAnimated已经被transitionDuration替代
    fitWidth: true // isFitWidth在v4里改名为fitWidth
  });
});

2. 检查Masonry的配置项

你原来用的isAnimated和isFitWidth是旧版Masonry的属性，在v4版本里已经改名为：

• isAnimated → transitionDuration（可以设置动画时长，比如'0.3s'，或者设为0关闭动画）
• isFitWidth → fitWidth

3. 额外的小建议（可选，帮你优化首次加载体验）

如果不想先碰CSS，也可以给<img>标签加上width和height属性，让浏览器提前知道图片的尺寸，减少布局偏移：

<img src="img/1.png" width="800" height="600">

这样即使图片还没加载完，浏览器也会预留出对应的空间，避免堆叠。

为什么刷新后正常？ #

刷新后图片已经被浏览器缓存，加载速度极快，Masonry初始化时图片已经有了尺寸，所以布局正常。而首次加载时图片还在加载，Masonry提前初始化，没有拿到正确的图片尺寸，就会导致堆叠。

备注：内容来源于stack exchange，提问作者Metztli