使用圖像加載砌體

我是一個js新手，並希望這個問題似乎不太愚蠢。使用圖像加載砌體

我爲我的網站使用石工 - 工作正常。我想讓我的箱子在砌體完成加載時出現。在互聯網上搜索我發現幾個帖子建議使用imagesloaded Plugin來解決這個問題。它只是沒有改變任何東西。這意味着：我的佈局和內容框不斷被搞亂，直到砌體完成加載，然後箱子突然跳到他們正確的位置。

我的代碼：

$(document).ready(function() { 

    var $container = $('#post-area'); 
    $container.imagesLoaded(function() { 
     $container.masonry({ 
      itemSelector : '.box', 
      columnwidth: 300, 
      gutter: 20, 
      isFitWidth: true, 
      isAnimated: !Modernizr.csstransitions 
     });  
    }); 
});

我也收到這個螢火錯誤：

TypeError: EventEmitter is not a constructor 
ImagesLoaded.prototype = new EventEmitter();

我加載了imagesloaded JS這樣在我的網站的末尾（我不能」 t找到任何信息，如果圖像加載已經包含在砌體或不，有些人寫道，它不再包括在內 - 令人困惑）：

<script src="http://www.domainname.com/js/imagesloaded.js"></script>

如果有人能幫助我，我會非常開心。並告訴我，如果imagesloaded是甚至正確的插件來解決這個問題！

來源

2013-12-12 CaraMar

imagesLoaded不包括在砌體，所以你應該使用單獨的plugin。我會建議使用編譯的.min版本。

關於你的堆疊圖像的問題：問題不在圖像上裝入石工。在您的代碼中，imagesLoaded正在等待所有圖像加載，然後觸發砌築。加載所有圖像後，砌體插件可以正確定義它們的尺寸並放在網格上。在此之前，瀏覽器會像往常一樣加載圖像，並根據定義的CSS顯示它們，這就是爲什麼它們搞砸了。

其中一個可能的解決方案之一是隱藏默認元素，然後同時imagesLoaded確認淡入，即加載的圖像：

$(document).ready(function() { 

    var $boxes = $('.box'); 
    $boxes.hide(); 

    var $container = $('#post-area'); 
    $container.imagesLoaded(function() { 
    $boxes.fadeIn(); 

    $container.masonry({ 
     itemSelector : '.box', 
     columnwidth: 300, 
     gutter: 20, 
     isFitWidth: true, 
     isAnimated: !Modernizr.csstransitions 
    });  
    }); 
});

來源

2013-12-27 11:23:23 Leger

謝謝Leger。這幫了我很多。我只是把默認的.box隱藏在css（display：none）中，讓它看起來像你用jquery fadeIn建議的那樣。否則它總是出現一毫秒，然後再次被隱藏。 – CaraMar

。包裝（縮小）版本爲我工作：http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js –

另一種解決方案是初始化砌體內部$（窗口）.load（）而不是$（文件）。就緒（）。這將觸發砌體頁面上所有的媒體加載之後 - 圖像，字體，外部腳本和樣式等

$(window).load(function(){ 
    $('#container').masonry({ 
     // options... 
    }); 
});

來源

2014-11-14 04:49:33 user2572094

我正在使用無限滾動，有沒有辦法動態附加的HTML被處理頁面加載後所有媒體上的砌體？ –

這不適用於動態內容。 $（window）.load只會觸發一次。 – Triynko

不要這樣做的原因：http://metafizzy.co/blog/window-load-last-resort/ – sheriffderek

安裝

npm install masonry-layout --save 

npm install imagesloaded --save

然後香草js的選項將是

'use strict' 

const Masonry = require('masonry-layout') 
const imgloaded = require('imagesloaded') 
const elem = document.querySelector('.grid') 
var imgLoad = imgloaded(elem) 
    function onAlways() { 
     const msnry = new Masonry(elem, { 
      // options 
      columnWidth: '.grid-sizer', 
      // do not use .grid-sizer in layout 
      itemSelector: '.grid-item', 
      percentPosition: true, 
      gutter: 10 
     }) 
    // console.log('all images are loaded') 
} 
if (elem) { 
    // bind with .on() 
    imgLoad.on('always', onAlways) 
    // unbind with .off() 
    // imgLoad.off('always', onAlways) 
}

然後檢查控制檯是否加載了所有圖像。

來源

2017-01-30 02:04:13

使用圖像加載砌體

回答

相關問題