Masonry JS 在加载图像之前初始化

Question

我正在建立一个网站，用作申请大学的作品集。我对 javascript 很不满意，即使阅读了所有其他类似的问题也无法使它正常工作。

基本上，masonry 在图像完成加载之前进行初始化，这会破坏布局。你可以在我的网站上看到这个问题 vladimirstamenov.com

通过在 firefox 中以私有模式打开，我已经能够 100% 地重现该问题。

这是我尝试使用的解决方案。

$(window).load(function(){
      $('.grid').masonry({
      columnWidth: 200, 
      itemSelector: '.portfolio-item'
      });
    });

在上面的代码中，将 columnWidth 更改为完全不影响我的网格的任何值，这让我认为它根本不起作用。

我的网格结构如下：

<div class="row grid" data-masonry='{"percentPosition": true }'>

    <div class="col-sm-6 col-md-4 portfolio-item">Image</div>

</div>

我已将解决方案放在正文标签末尾的 <script> 中。在该标签中，我还初始化了“Animate On Scroll (AOS)”，并为我的导航栏提供了一个简短的脚本。 screenshot reference

上面我的 javascript 文件按以下顺序链接： JQuery > Bootstrap(5) > Masonry > AOS > Fancybox > 自定义 JS

抱歉，如果信息过多。感谢您的回答。

Answer 1

在您的网站上，我看到您尝试过使用 imagesLoaded 插件，如下所示：

//incorrect selectors
$('#container').imagesLoaded( function() {
    $('.grid').masonry({
        itemSelector: '.portfolio-item'
    });
});

但是，页面上没有 ID 为 'container' 的元素。 '#' 是一个 ID 选择器。您应该向包含图像的元素添加一个唯一 ID，并将选择器更新为该 ID。例如：

<div class="row pt-5 grid" id="gallery">

此外，您在页面上没有带有 class 'grid' 的元素，因此您也应该在 #gallery 上初始化 Masonry。如下：

//updated selectors
$('#gallery').imagesLoaded(function() {
    $('#gallery').masonry({
        itemSelector: '.portfolio-item'
    });
});

最后，您可以从 HTML 中删除 Masonry 的内联实例化，因为您现在正在使用 jQuery 对其进行初始化。这个位：

data-masonry='{"percentPosition": true }' <-- not needed

Masonry JS initializing before images are loaded