在加載圖像之前初始化 Masonry JS

Question

我正在建立一個網站，用作申請大學的作品集。 我對 javascript 很不滿意，即使在閱讀了所有其他類似的問題后也無法讓它工作。

基本上砌體在圖像完成加載之前初始化，這會破壞布局。 您可以在我的網站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)”，並為我的導航欄提供了一個簡短的腳本。 截圖參考

在此之上，我的 javascript 文件按以下順序鏈接：JQuery > Bootstrap(5) > Masonry > AOS > Fancybox > Custom JS

對不起，如果這是太多的信息。 感謝您的回答。

Answer 1

在您的網站上，我可以看到您已嘗試使用 imagesLoaded 插件，如下所示：

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

但是，您在頁面上沒有 ID 為“容器”的元素。 '#' 是一個 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