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

编程问答 2022-05-28

问题描述

我正在建立一个网站，用作申请大学的作品集。 我对 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>

我已将解决方案放在 body 标签末尾的 <script> 中。在该标签中，我还初始化了“滚动动画 (AOS)”，并有一个我的导航栏需要的简短脚本。 screenshot reference

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

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

解决方法

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

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

但是，页面上没有 ID 为“容器”的元素。 '#' 是一个 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
bootstrap-5javascriptjqueryjquery-masonry