2

アイテムが表示されているときに data-src を src に切り替えることで LazyLoading を実行する軽量コードを使用することを検討しています。基本的には、フルファットの LazyLoad を削減したものです。ここからのコード: http://luis-almeida.github.com/unveil/

(function( $ ) {

$.fn.unveil = function( threshold ) {
    var $w = $( window ), 
        th = threshold || 0,
        images = this, 
        loaded, 
        inview,
        source;

    this.one( "unveil", function(){
        source = this.getAttribute( "data-src" );
        this.setAttribute( "src", source );
        this.removeAttribute( "data-src" );
    } );

    function unveil() {
        inview = images.filter(function(){
            var $e = $( this ),
                wt = $w.scrollTop(),
                wb = wt + $w.height(),
                et = $e.offset().top,
                eb = et + $e.height();

            return eb >= wt - th && et <= wb + th;
        });

        loaded = inview.trigger( "unveil" );
        images = images.not( loaded );
    }

    $w.scroll( unveil );
    $w.resize( unveil );

    unveil();

    return this;
};

})( jQuery );

ただし、私の jQuery の知識はかなり限られているため、可視性チェックは scrollTop の垂直位置に基づいていることがわかります。

水平方向のjQueryツールのスクロール可能なdiv内に多数の製品があるeコマースストアの一部でこれを使用しようとしています。それらは画面の垂直部分内にあるため、すべての画像が読み込まれます。LazyLoad を使用しようとしましたが、機能しませんでした。

このコードを編集して、オーバーフローの右側の div 内の画像 (非表示) を関数が検出できるようにする方法を知っている人はいますか? 画像の位置は特定のポイントの右側ですか?

4

0 に答える 0