web-dev-qa-db-ja.com

LazyLoadとJquery Masonryの組み合わせ

私は石工とmooツールのレイジーロードをつなぎ合わせようとしましたが、どちらもあまりうまくいっていないようですが、コーディングに少し役に立たないためかもしれません！

組積造は このページ で機能します。

しかし、lazyloadと組み合わせようとすると、完全にめちゃくちゃになるようです。誰もが両方のプラグインを一緒に実装する方法を知っていますか？

私はそれを理解するために6日間費やしましたが、これが私の最終的な希望です。

ありがとう

jqueryjquery-masonrylazy-loading
15
user554954

最近、私のウェブサイトの1つでこれを解決する必要があります。私はいくつかの方法を試しましたが、うまくいくようです。

1。最初の方法：

  • 石積みをアイテムにロードする
  • すべての画像にプレースホルダーを置き、それらにレイジーロードを使用します
  • ここで、各画像がlazyload.loadコールバックを起動するときに、石積みをリロードします->一連の石積み（ 'reload'）[新しい画像でjsfiddleを更新しました。ポイントを説明するのが簡単です]

http://jsfiddle.net/7vEJM/8/

var $container = $('#container');
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.item',
        columnWidth: function(containerWidth){
            return containerWidth / 12;
        }
    });
    $('.item img').addClass('not-loaded');
    $('.item img.not-loaded').lazyload({
        effect: 'fadeIn',
        load: function() {
            // Disable trigger on this image
            $(this).removeClass("not-loaded");
            $container.masonry('reload');
        }
    });
    $('.item img.not-loaded').trigger('scroll');
});

この方法は優れていますが、欠点が1つあります。 masonry.reload（）の時間は各画像の読み込み時間に依存するため、グリッドレイアウトは同じに保たれない可能性があります（つまり、最初に読み込まれるはずのものが最後にのみ終了する可能性があります）

2。 2番目の方法：pinterestのようなサイトを見てください、私はそれが最初の方法に従わないと思います、なぜならそれらは画像がロードされる前でさえコンテナボックスが配置されているので、私が達成しようとしたことはです画像と同じ比率のボックスのみを表示します。手順は次のとおりです。

  • 画像次元を渡します（{image1: [300,400],image2: [400,500]}のようなjsonを返すだけです）
  • CSSトリックを使用して、コンテナーに従ってdivボックスのサイズを変更します。私はそのトリックを見つけました ここ
  • 通常のように遅延ロード。リロードをトリガーする必要はありません。画像がないため、ボックスは正しく配置されています。

http://jsfiddle.net/nathando/s3KPn/4/

var $container = $('#container');
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.item',
        columnWidth: function(containerWidth){
            return containerWidth / 12;
        }
    });
    $('.item img').lazyload({
        effect: 'fadeIn'
    });
    $('.item img').trigger('scroll');
});

[2番目のメソッドにjsfiddleを追加するために編集されました]

通知：

  • このフィドルでは、サーバーのコードから渡される「padding-bottom：xxx％」に各画像の高さ/幅の比率を手動で入力しました（ステップ1を参照）
  • ボックスを表示するために境界線に追加されました
  • 画像が読み込まれていない場合でもボックスが配置されることを示すには、コメントを解除して/*display: none */をコメント解除し、display: blockを#container.fluid .item imgにコメントしてください

乾杯

27
Nathan Do

私は他の同じ問題の記事に同じ答えを投稿しました。画像が重なってしまう問題がある場合、日本語ですが以下のサイトで解決策を見つけました。

http://www.webdesignleaves.com/wp/jquery/1340/

これがお役に立てば幸いです。

ポイントは以下の使用です。

$('img.lazy').load(function(){ ... })

HTML

<div id="works_list">
<div class="work_item">
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/001.jpg" alt="">
<p>title 1</p>  
</div><!-- end of .work_item-->
<div class="work_item">
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/002.jpg" alt="">
<p>title 2</p>  
</div><!-- end of .work_item-->
 ....
</div><!-- end of #works_list -->

jQuery

$("img.lazy").lazyload({
    effect: 'fadeIn',
    effectspeed: 1000,
    threshold: 200
});

$('img.lazy').load(function() {
    masonry_update();
});

function masonry_update() {     
    var $works_list = $('#works_list');
    $works_list.imagesLoaded(function(){
        $works_list.masonry({
            itemSelector: '.work_item',　
            isFitWidth: true,　
            columnWidth: 160
        });
    });
 }
8
softk5

softk5回答がうまく機能せず、ほとんどのブラウザでフリーズが発生しました。これが私の次のコードとその働きです。

jQuery(document).ready(function(){
    jQuery("img.lazy").lazyload({
        effect: 'fadeIn',
        effectspeed: 1000,
        threshold: 200,
        load:function(){
            var $container = jQuery('.is_masonry');
            $container.masonry({
            }).imagesLoaded(function() {   $container.masonry();  });

        }
    });

});
4
Ali Nouman

その理由は、Masonryはアイテムを適切にレイアウトするために画像の寸法を知る必要があるからです。ただし、LazyLoadは、画像がビューポートに表示されるまで画像の読み込みを遅らせます。つまり、画像には寸法がありません（または、img srcとして設定したダミー/プレースホルダー画像の寸法になります）。

3
Thomas Graft

LazyLoadの "callback_loaded"で "Masonry"を再利用してみてください

var ll = new LazyLoad({
    elements_selector: "img[data-src]",
    callback_loaded() {
        masonry = new Masonry(grid, {
            itemSelector: '.img-selector',
        });
    }
});

さらに追加されたコードは以下です

callback_loaded() {
    masonry = new Masonry(grid, {
        itemSelector: '.img-selector',
    });
}
0
Rakesh

多分誰かも問題を抱えているでしょう、助けを願っています。

WordPress photoswipe-masonryテーマで機能させるには、プラグインを変更しないと不可能です。

次はこの変更に関連していて、石積みだけです

a）lazyloadはdata-original = "xxx"属性を使用して画像のURLを設定します。 srcではありません。あなたはいくつかのプレースホルダーを配置する必要があります。 lazyloadなしでロードされる1x1ピクセルの場合があります。

b）このプレースホルダーは、将来のレイジーロードされたイメージのすべてのスペースをカバーする必要があります。OR組積造は、すべてのイメージをレイジーローディングビューとして表示します。これは、読み込まれる前の画像のサイズが0px x 0pxがゼロであるためです。読み込み前にすべての画像が表示領域に収まります。 Lazyloadはすべてを可視としてカウントし、すべてロードします。

セットが必要な将来のイメージのためにすべてのスペースを配置するには

style = "width：xxpx; height：xxpx;"

width = "xx"とheight = "xx"だけでは不十分です

画像のプレースホルダーは次のようになりました：

<img src="http:..1x1px" data-original="http://real_image" style="width:xxpx;height:xxpx;">

次に、レイジーロードを通常の方法と石積みで適用します。任意の順序で。

重要-組積造は幅を列サイズに更新しますが、高さではありません。したがって、列サイズ= 50pxの場合、プレースホルダーの高さを計算する必要があります

new_height = 50/actual_width * actual_height;

したがって、WordPressテーマの必要性

$scaled_height =$options['thumbnail_width']/$full[1] * $full[2];

.....

<img src="http://xxxx/1x1px.jpg" data-original='. $thumb[0] .' itemprop="thumbnail" alt="'.$image_description.'" style="width:'.$full[1].'px;height:'.$scaled_height.'px;" width="'.$full[1].'" height="'.$full[2].'"/>

....

次に、石積みの初期化の下に新しい行を追加します

var reloading = false;
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js',function(){
  $('.msnry_item img').lazyload({
      effect: 'fadeIn',
      //container: container,
      threshold : 200,
      skip_invisible : false,
      failure_limit : 5,
      load: function() {
          if( ! reloading ) {
             reloading = true;
             setTimeout(function(){ 
                  container.masonry('reload');
                  reloading = false;
             }, 500);
         }
      }
  });
});
0
Alexey Yakovlev