画像がロードされた状態で石積みを使用する

Question

私は初心者です。この質問はあまりにも愚かではないように思えます。

私は自分のサイトにmasonryを使用しています。 石工が装填を終えたときに私のボックスが現れるようにしたかったのです。インターネットで検索すると、この問題を解決するためにimagesloadedプラグインを使用することを推奨するいくつかの投稿が見つかりました。それだけで何も変わらない。つまり、私のレイアウトとコンテンツボックスは、石積みの読み込みが終了するまで乱され続けます。ちょうどボックスが突然右の位置にジャンプします。

マイコード：

$(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をロードしています（私は「couldn imagesloadedがすでにメーソンリーに含まれているかどうかについての情報を見つけることはできません。混乱していると書いている人もいます。混乱します）。

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

誰かが私を助けることができれば、本当に嬉しいです。 imagesloadedがこの問題を解決するための正しいプラグインであるかどうかを教えてください！

Answer 1

imagesLoadedはMasonryには含まれていませんので、別途pluginを使用してください。私はコンパイルされた.minのバージョンを使用することをお勧めします。

スタックされたイメージの問題について：問題はimagesLoadedではなく、Masonryでもありません。 あなたのコードimagesLoadedは、すべての画像がロードされてから石積みが始まるまで待っています。すべての画像をロードしたら、Masonryプラグインはサイズを適切に定義してグリッドに配置できます。その前に、ブラウザはイメージを通常どおり読み込んで、定義された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 
    });  
    }); 
}); 

Answer 2

別の解決策は、$（ウィンドウ）.LOAD（内、石積みを初期化することである）の代わりに、 $（document）.ready（）。ページ上のすべてのメディアがロードされた後にこれは、石積みの引き金となる - など

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

Answer 3

画像、フォント、外部スクリプトやスタイルシートを、インストール

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) 
} 

だろう

次に、すべての画像がロードされていることをコンソールで確認します。