task-29 Jqueryリロード、トップへ戻る

に質問
1.ウィンドウの表示範囲(ブラウザの上端と下端の間、肉眼で表示)に要素が表示されているかどうかを判断する方法.関数isVisible実装を書く

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

2 .ウィンドウがスクロールされると、要素がウィンドウの表示範囲に表示されるかどうかを判断します.表示されるたびにコンソールにtrueを印刷します.コードで実現

function logVisible($node){
        $(window).on('scroll',function(){
            var scrollTop = $(this).scrollTop(),
                winH = $(this).height(),
                top = $node.offset().top;
        if (scrollTop+winH>top) {
            console.log('true');
        }
        })  
 }

logVisible($('div'));

3.ウィンドウがスクロールされると、1つの要素がウィンドウの表示範囲に表示されるかどうかを判断します.エレメントが最初に表示されるとコンソールにtrueが印刷され、その後は処理されません.コードで実現

function logVisible($node) {
        $(window).on('scroll', function() {
            var scrollTop = $(this).scrollTop(),
            winH = $(this).height(),
            top = $node.offset().top;
            if (scrollTop + winH > top) {
                if ($node.data('visible')) {
                    return;
                }
                $node.data('visible', true);
                console.log('true');
            } else {
                $node.data('visible', false);
            }
        })
    }
    logVisible($('div'));

4.画像のリロードの原理は何ですか?

画像スクロールロードとは何ですか?通俗的には、1つのページにアクセスするときに、img要素や他の要素の背景画像のパスを1*1 pxのサイズの画像のパスに置き換え(一度だけ要求する)、ブラウザの可視領域に画像が表示されたときにのみ、画像の真のパスを設定して、画像を表示させる.これが画像の怠惰なロードです.

なぜこの技術を使うのですか?例えば、宝を洗う、京東のトップページなど、1つのページに多くの画像がありますが、最初からこんなに多くのリクエストを送信すると、ページのロードが長くなります.jsファイルがドキュメントの下部に置かれていて、ちょうどページの頭がこのjsファイルに依存していると、困ります.さらに大変なことに、最初から80件のリクエストを送信すると、サーバが耐えられなくなる可能性があります(このページにアクセスしているのは1人か2人だけではありません).

そのため、サーバのストレスを軽減するだけでなく、ロードされたページをより速くユーザーの前に表示できる(ユーザー体験が良い)という利点が明らかになりました.

はどのように実現しますか?実は原理的にとても簡単で、ページがロードする時ページの上のimgラベルのsrcを1つの小さいピクチャーを指して、真実の住所を1つのカスタム属性の中で保存して、ここで私はdata-srcで保存して、以下のようにします.![](loading.gif)その後、ページimgタグを取得して保存し、タイマを開き、保存したimgタグを巡り、その位置が可視領域に現れたかどうかを判断する.ビジュアル領域に表示されたら、実際のsrcアドレスを付与します.また配列から削除し,重複判断を避ける.では、視覚領域に現れるかどうかをどう判断するかを聞くかもしれません.それは、現在のimgのドキュメントトップに対するオフセット距離からscrollTopの距離を減算し、ブラウザウィンドウの高さと比較することができ、ブラウザウィンドウより小さい場合は可視領域に表示され、逆に表示されません.

コード#コード#
ソースアドレス1.backtopプレビュー2.画像リロードプレビュー3.怠惰ロードajaxプレビュー(ローカルテストに成功)