jquery遅延読み込みを実装して先頭に戻る

この記事では、jQuery の先頭への遅延読み込みを実装する方法を説明します。

要素がウィンドウの可視範囲（ブラウザの上端と下端の間、肉眼で見える範囲）に表示されるかどうかを判断する方法。

function isVisible($node){    var winH = $(window).height(), 
        winS = $(window).scrollTop(),
        nodeHeight = $node.height(),
        nodeTop = $node.offset().top;        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight){            return true;
        }else{            return false;
        }
}

を実装する関数 isVisible を作成して、ウィンドウがスクロールするときに、要素がウィンドウの可視範囲に表示されるかどうかを決定します。発生するたびにコンソールに true を出力します。コードを使用して実装します

function isVisible($node){
    $(window).on('scroll',function(){        var winH = $(window).height(), 
            winS = $(window).scrollTop(),
            nodeHeight = $node.height(),
            nodeTop = $node.offset().top;        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){            console.log(true);
        }else{            console.log(false);
        }
    });
}

isVisible($node);

ウィンドウがスクロールするときに、要素がウィンドウの表示範囲に表示されるかどうかを判断します。要素が初めて出現するときはコンソールに true を出力し、再度出現するときは処理は行われません。コードを使用して画像の

function isVisible($node){
    $(window).on('scroll',function(){        var winH = $(window).height(), 
            winS = $(window).scrollTop(),
            nodeHeight = $node.height(),
            nodeTop = $node.offset().top;        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){            if(!$node.attr("data-sc")){                console.log(true);
                $node.attr("data-sc",true); 
            }else{                return;
            }
        }else{            return;
        }
    });
}
isVisible($node);

遅延読み込みを実装する原理は何ですか?

ページが読み込まれたら、ページの img アドレスを小さな同一の白い画像に指定し、実際の画像アドレスを作成したカスタム属性に次のように入力します。

<img  src="/static/imghwm/default1.png"  data-src="small.png"  class="lazy"   data- alt="jquery遅延読み込みを実装して先頭に戻る" >

src は小さな画像アドレス、data-srcは実際の住所です。
画像がウィンドウの可視領域に表示されるとき、srcにカスタム属性の実画像アドレスを割り当てるのが遅延読み込みの実装原則です。

この記事では jquery について説明します。その他の関連コンテンツについては、php 中国語 Web サイトを参照してください。

関連する推奨事項:

これに関する関連する質問

JS 配列、文字列、数学関数

JS 時間オブジェクトと再帰の問題について

以上がjquery遅延読み込みを実装して先頭に戻るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。