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

Question

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

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

通过在 Firefox 中以私有(private)模式打开，我已经能够 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> 中在我的 body 标签的末尾。在该标签中，我还初始化了“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">

此外，您在页面上没有类为“grid”的元素，因此您也应该在#gallery 上初始化 Masonry。如下:

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

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

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