6

カスタム コンテンツ スクローラーjQuery カスタム コンテンツ スクローラーを含むコンテナーがあります: このコード:

(function($){
    $(window).load(function(){
        $(".content").mCustomScrollbar({
            scrollButtons: { enable: true },
            mouseWheelPixels: 250
        });
    });
})(jQuery);

そして、Lazy Load で使用したいと思います。

$(function() {
  $("img.lazy").lazyload({
     effect : "fadeIn",
     container: $(".content")
  });
});

Scrollerページのコールバック関数で動作するはずですが、jqueryが苦手なので結果がうまくいきません。

以下のようなコードを使用すると、ページの読み込み時にすべての画像が読み込まれます。

$(function() {
  $("img.lazy").lazyload({
     effect : "fadeIn",
     container: $(".mCSB_container")
  });
});

オーソスは、これは単純な js 関数を作成し、 whileScrollingイベントで呼び出すことで実行できると述べています。

助けてくれてありがとう。

4

4 に答える 4

5

containerはスクロール コンテナーを使用しないため、使用しようとしても機能しませんが、スクロールを実現するためにコンテナーmCustomScrollbar内の相対的な配置が行われます。overflow: hidden私が考えることができる最もクリーンなアプローチは、カスタム [遅延ロードをトリガーするイベント][1] を使用することです。Hasan Gürsoy から提供されたサンプル ファイルに対して行う方法は次のとおりです。

<script>
$(document).ready(function () {
    var filledHeight = 250;
    $(window).load(function () {
        $(".scroll").height($(window).height() - filledHeight);
        $(".scroll").mCustomScrollbar({ scrollButtons: { enable: true },
        mouseWheelPixels: 250,
        callbacks: { whileScrolling: function() {
            var scroller = $(".mCSB_container");
            var scrollerBox = scroller.closest(".mCustomScrollBox");
            $(".scroll img.lazy").filter(function() {
                var $this = $(this);
                if($this.attr("src") == $this.data("src")) return false;
                var scrollerTop = scroller.position().top;
                var scrollerHeight = scrollerBox.height();
                var offset = $this.closest("div").position();
                return (offset.top < scrollerHeight - scrollerTop);
            }).trigger("lazyScroll");
            }}});

        $("img.lazy").lazyload({ event: "lazyScroll" });
    });
});
</script>

コールバックも使用しますが、どの画像が表示whileScrollingされているかを確認するためだけです。img.lazyコンテナに対する相対的な位置が、コンテナの高さから CSStopプロパティを引いた値より大きくない場合です。(常に上から下にスクロールすると仮定します。この設定では、下にスクロールしすぎて見えなくなった画像は認識されません。) これらの画像に対して、関数はカスタムlazyScrollイベントをトリガーします。これは、lazyload が画像の読み込みをトリガーするために使用するイベントです。

この解決策はまだ移植性が高くないことに注意してください.mCSB_container。.mCustomScrollBoxスクリプトが複数のmCustomScrollbar. 実際のシナリオでは、コールバックの呼び出しごとに jQuery オブジェクトを再作成する代わりに、jQuery オブジェクトもキャッシュします。

于 2014-03-25T07:52:22.417 に答える
2

whileScrolling著者は、次のようにイベントにさらにフックすることを意味していたと思います。

(function($){

    $(window).load(function(){

        $("#content_1").mCustomScrollbar({
            scrollButtons:{
                enable:true
            },
            callbacks:{
                whileScrolling:function(){ WhileScrolling(); } 
            }
        });

        function WhileScrolling(){
            $("img.lazy").lazyload();
        }

    });

})(jQuery);

HTML コンテナーは次のようになります。




<div id="content_1" class="content">
    <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
    <p>
        <img class="lazy img-responsive" data-original="/img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>
        <img class="lazy img-responsive" data-original="/img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
        <img class="lazy img-responsive" data-original="/img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>
        <img class="lazy img-responsive" data-original="/img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>
        <img class="lazy img-responsive" data-original="/img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
        <img class="lazy img-responsive" data-original="/img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/> 
    </p>
    <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
    <p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
    <p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p> 
    <p>Etiam sed massa felis, aliquam pellentesque est.</p>
    <p>the end.</p>
</div>

スクロール中の数を減らすには、たとえば、スクロールするコンテンツの上部の位置 (ピクセル) のプロパティをlazyload()使用できます。mcs.top

function WhileScrolling()
{
    // Debug:
    // console.log( 'top: ' + mcs.top );

    // Run lazyload in 10 pixel steps (adjust to your needs) 
    if( 0 == mcs.top % 10 )
    {
        // Run lazyload on the "div#conent_1" box:
        $("#content_1 img.lazy").lazyload();

        // Debug:
        //console.log( 'lazyload - mcs.top: ' + mcs.top );
    }
}

ここでは、layzload セレクターを制限しているため、DOM ツリー全体ですべての画像を見つける必要はありません。

Internet Explorer 11では浮動小数点数を指定できますが、 Chrome ではmcs.top常に整数であることに気付きました。

したがって、 で床に置くことができMath.floor()ます。

遅延ロードの呼び出しをさらに減らすために、さらにmcs.top以前の値と比較することができます。

var mcsTopPrev = 0;
var mcsTop = 0;
function WhileScrolling()
{
    // Fix the Chrome vs Internet Explorer difference
    mcsTop = Math.floor( mcs.top );

    // Current vs previous 
    if(  mcsTop != mcsTopPrev )
    {
        // Run lazyload in 10px scrolling steps (adjust to your needs)
        if( 0 == mcsTop % 10 )
        {
            $("#cphContent_lReferences img.lazy").lazyload();
        }
    }
    mcsTopPrev =  mcsTop;
}
于 2014-03-22T17:37:02.253 に答える
0

最後に、mCustomScrollbar コールバックから呼び出すことができるこれを書きました。

    function lazyLoad(selector,container) {     

      var $container=$(container);            
      var container_offset=$container.offset();
      container_offset.bottom=container_offset.top+$container.height();

      $(selector,$container).filter(function(index,img){
        if (!img.loaded) {                    
          var img_offset=$(img).offset();     
          img_offset.bottom=img_offset.top+img.height;
          return (img_offset.top<container_offset.bottom && (img_offset.top>0 || img_offset.bottom>0));
        }                                                                                                                                        
      }).trigger('appear');

    }

画像サイズが一定で、画像リストが膨大な場合は、二分法を使用して最初の画像を検索する価値があるかもしれません。次に、既知の画像とコンテナーの寸法を使用して、'appear' イベントをトリガーする必要があるインデックスの範囲を計算します。一致する画像のオフセット()...

于 2015-06-24T17:22:50.297 に答える