19

私は masonry と moo ツールを lazyload でつなぎ合わせようとしていますが、どちらもあまりうまくいかないようです。

石積みはこのページで動作します。

ただし、遅延ロードでまとめようとすると、完全に台無しになるようです。両方のプラグインを一緒に実装する方法を知っている人はいますか?

私はそれを理解しようと6日間を費やしましたが、これが私の最後の希望です！

ありがとう

4

6 に答える 6

30

最近、私のウェブサイトの 1 つでこれを解決しなければなりません。私はいくつかの方法を試しましたが、うまくいっているようです。

1. 最初の方法:

  • アイテムに石積みを積む
  • すべての画像にプレースホルダーを配置し、それらに遅延ロードを使用します
  • ここで、各画像が lazyload.load コールバックを起動すると、masonry をリロードします -> 一連の masonry('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 のようなサイトを見てください。最初の方法には従わないと思います。画像が読み込まれる前にコンテナー ボックスが配置されているためです。したがって、私が達成しようとしたのは、同じボックスだけを表示することです比率は画像の通りです。手順は次のとおりです。

  • 画像のディメンションを渡します（のようなjsonを返すだけです{image1: [300,400],image2: [400,500]}）
  • 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

乾杯

于 2013-05-03T15:51:56.193 に答える
9

I posted the same answer on other same issues article. If you have the problem images get overlapped, I found the solution at the site below, although it is in Japanese.

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

Hope this will help.

The point is use following;

$('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
        });
    });
 }
于 2015-01-04T20:06:51.170 に答える
5

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

        }
    });

});
于 2016-02-08T09:52:43.593 に答える
3

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

于 2012-06-21T16:30:50.223 に答える
0

多分誰かも問題を抱えているでしょう、助けてください。

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

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

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

b) このプレースホルダーは、将来の遅延ロードされた画像のためにすべてのスペースをカバーする必要があります。そうでない場合、メーソンリーはすべての画像を遅延読み込みビューとして表示します。これは、画像がロードされる前のサイズが 0px x 0px であるためです。すべての画像は、ロードする前に表示領域に収まります。Lazyload はすべてを表示可能としてカウントし、すべてをロードします。

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

スタイル="幅:xxpx;高さ:xxpx;"

width="xx" と height="xx" だけでは十分ではありません

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

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

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

重要 - 石積みは幅を列のサイズに更新しますが、高さは更新しないため、列のサイズ = 50px の場合、プレースホルダーの高さを計算する必要があります

new_height = 50 / 実際の幅 * 実際の高さ;

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].'"/>

....

次に、masonry init の下に新しい行を追加します

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);
         }
      }
  });
});
于 2015-06-03T21:13:32.733 に答える