石積みの画像読み込みに関する問題

Question

私は、サーバーからたくさんの画像を取得し、画面にダンプし、石積みを使ってすべての画像をレイアウトしている私のページに少し問題があります。

すべての画像が読み込まれますが、画像が底に向かって読み込まれる前に石積みが呼び出されているように見えますが、すべての画像が混乱して読み込まれます。私はいくつかのスクリーンショットを添付してあなたを見せてくれました。これは他のページでも起こることに注意してください。

そして、私が使用しています重要なコードの一部。

<script> 
$.each($('.img-grid-container img'), function (index, obj) { 
    $(this).css({ 
     'width' : (50 + Math.round((Math.random()) * 330)) 
    }); 
}); 
</script> 

<script> 
var $container = $('.img-grid-container'); 

$container.imagesLoaded(function(){ 
    $('#grid-section').fadeIn("normal"); 
    $('#loader-container').hide(); 
    $container.masonry({ 
    itemSelector : '.attachment-full', 
    columnWidth: 30 
    }); 
}); 
</script> 

いつでも助けがあります。

-R

Answer 1

[私はそれはそれとしてかなりクールに見えると思いますが、ちょうどそれらdraggables作り、あなたの行って...]とにかく：

あなたの石工コードは私には正常に見える[私はほとんど同じものを持っています私のために働いていますが、

• 文書内のすべてのJQueryは準備ができていますか？
• masonryを最初に呼び出して＃grid-sectionを消した場合はどうなりますか？
• コンテナのセレクタが問題なのでしょうか？あなたのページにそのクラスのインスタンスが複数ある場合、imagesLoadedが最初のインスタンスの後にトリガーするか、インスタンスの最後のインスタンスがロードされるかはわかりません。

役立ちます

希望[それはあなたがいつでもあなたのレンガを並べ替えるために（「リロード」）.masonry使用することができる場合に役立ちます]。