web-dev-qa-db-ja.com

画像がロードされた石積みの使用

私はjsの初心者であり、この質問があまり愚かではないように思われることを願っています。

私は自分のサイトに石積みを使用しています-正常に動作します。石積みがロードを終えたときにボックスを表示させたかったのです。インターネットで検索すると、この問題を解決するためにimagesloadedプラグインを使用することを推奨するいくつかの投稿が見つかりました。何も変わりません。つまり、私のレイアウトボックスとコンテンツボックスは、石積みの読み込みが完了するまで混乱し続け、その直後にボックスが突然正しい位置にジャンプします。

私のコード：

$(document).ready(function() {

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

私もこのfirebug-errorを取得しています：

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

私は自分のウェブサイトの最後にこのようにimagesloadedjsをロードしています（imagesloadedがすでに石積みに含まれているかどうかにかかわらず、情報を見つけることができませんでした、一部はもう含まれていないと書いています-混乱します）：

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

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

javascriptcss3jquery-masonry
10
CaraMar

imagesLoadedはMasonryに含まれていないため、個別に plugin を使用する必要があります。コンパイルされた.minバージョンを使用することをお勧めします。

スタックされた画像の問題について：問題はimagesLoadedにもMasonryにもありません。コードでは、imagesLoadedはすべての画像が読み込まれるまで待機してから、石積みを起動します。すべての画像が読み込まれると、Masonryプラグインはそれらのサイズを適切に定義し、グリッドに配置できます。その前に、ブラウザは通常どおり画像をロードし、定義されたCSSに従って画像を表示します。そのため、画像が台無しになっています。

考えられる解決策の1つは、デフォルトで要素を非表示にしてから、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
    });    
  });
});
14
Leger

別の解決策は、$（document）.ready（）ではなく$（window）.load（）内で石積みを初期化することです。これにより、ページ上のすべてのメディア（画像、フォント、外部スクリプト、スタイルシートなど）が読み込まれた後、Masonryがトリガーされます。

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

インストール

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

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

0
Frithir.com