石積み+ LazyLoad - イメージが重複する

Question

私はbase Mansory layoutを使って基本イメージグリッドを作成しています。無限のスクロールページを構築するために、データベースから数百または数千の画像をロードする必要があるため、主に読み込み時間のためにすべてをダウンロードする必要はありませんが、すべての無駄なトラフィック（彼がそれに達するまでスクロールしない限り、ユーザーは画像＃500を読み込まないでください）。 これを実現するには、jQuery LazyLoadプラグインを使用しようとしました。

これは私が私の石積みのイメージグリッドを埋める方法です：

  <ul class="grid effect-3" id="grid"> 
      <?php 
      for ($i = 0; $i < count($thumbArray); $i++) { 
       if ($i < 9) { 
        echo '<li><img class="img-grid" alt="' . $descArray[$i] . '" data-fullsize="' . $imgArray[$i] . '" src="' . $thumbArray[$i] . '"></li>'; 
       } else { 
        echo '<li><img class="img-grid lazy" alt="' . $descArray[$i] . '" data-fullsize="' . $imgArray[$i] . '" data-original="' . $thumbArray[$i] . '"></li>'; 
       } 

      } 
      ?> 
     </ul> 

は、基本的には、事前に最初の9の画像をロードして、他の人に「怠惰な」CSSクラスを追加するだけでなく、「SRC」属性を置き換えますLazyloadの「データオリジナル」と一緒に。

（ 'alt'と 'data-fullsize'属性がありますが、ライトボックスシステムに使用していますが、この質問の目的で無視することができます）。

<script src="js/jquery.lazyload.js"></script> 
<script>$("img.lazy").lazyload();</script> 

プラグインをインポートし、クラス.lazyでタグをのimgためにそれを適用する：私は持っているのindex.phpスクリプトの終わりに

。あなたのよう

：

問題は、私があるため、画像の高さを知らないのを前提とするという事実にある、石積みグリッドシステムはLazyloadプロセスによってロードされているすべての画像をオーバーレイ9番目のイメージ（lazyload指定が開始されたとき）の後に、イメージが互いにオーバーレイするのを見ることができます。私はこれは画像の位置が、JavaScriptとJavascriptを使って計算されるためです。絶対位置と上端と左端の属性が設定されているためですが、わかりません。

メーソンリーのウェブサイトを見ると、最初のFAQ itemがこれに関連しています。私がやろうとしたが、成功しなかったimagesLoadedの使用についてアドバイスします。

• 私はPHPのgetimagesize（）でイメージの高さを計算し、インラインスタイル属性として設定しようとしましたが、サーバーには強すぎて読み込みに時間がかかりすぎます。
• また、ページの最後に到達したときに項目を追加しようとしましたが（XHRを使ってDB項目を取得するのは簡単な解決策になります）、成功しませんでした。おそらく、このためにMasonryの追加機能を使用する必要がありますか？

ボトムラインは、数日間、類似のスレッドを読んで、複数のソリューションを実装していますが、役に立たないソリューションを見つけることを試みてきました。画像のサイズが変わる可能性があるので、私の目的のためにMasonryグリッドシステムが表示されていますが（たとえば、垂直画像ごとにギャップが必要ないなど）、実際にLazyloadと組み合わせるのは面倒です必要以上に多くの負荷がかかってしまい、サーバーが不必要なストレスを受けることになります。

オーバーレイしない画像はどうしたらいいですか？ありがとうございます（y）

Answer 1

の内側にほとんどの石工のプラグインを使用すると、アイテムの完全な再レイアウトを強制的に新しいアイテムを追加した後、すぐに呼び出すことができる再レイアウトの方法が挙げられます。あなたの場合は、masonry（ 'layout'）を呼び出すだけでよい。ここで、 "layout"はあなたの石工のインスタンスの名前です。グリッドにアイテムを追加した直後にこれを呼び出す必要があります。これはあなたのためにあなたのすべてのイメージの間隔を調整する必要があります。また、スクロールするときにaddItems（）メソッドを使用して項目を追加することもできます。それらを手動で追加しようとすると、それらはMasonry配列に追加されず、それらにレイアウトを適用できなくなります。その後、イメージがロードされるたびに、グリッドのレイアウトを更新することができ、それは次のようになりますhttp://imagesloaded.desandro.com/ ：

Answer 2

画像が完全に読み込まれる前に石積みがロードされています。あなたを実行してください。lazyload

$(window).on('load', function(){ 
    code here. 
}