29.jqueryリロード、トップに戻る

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

function isVisible($node){
        var scrollTop=$(window).scrollTop(), //        
            winH=$(window).height(), //       ，   
            offsetTop=$node.offset().top //             
        $(window).on('scroll',function(){
            if( (offsetTopscrollTop) ){
                return true;
            }else{
                return false;
            }
        });
    }

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

var $p=$('p');
$(window).on('scroll',function(){
    isVisible($p)
});

function isVisible($node){
    var winH=$(window).height(),
        scrollTop=$(window).scrollTop(),
        offsetTop=$node.offset().top;
    if( offsetTopscrollTop){
        console.log(true);
    }else{
        console.log(false);
    }
}

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

 var $p=$('.test-p');
    $(window).on('scroll',function(){
        if( $p.data('isVisi') ){
            return;
        }else{
            isVisible($p);
        }   
    });

    function isVisible($node){
        var winH=$(window).height(),
            scrollTop=$(window).scrollTop(),
            offsetTop=$node.offset().top;
        if( offsetTopscrollTop){
            console.log(true);
            $p.data('isVisi',true);
        }else{
            return;
        }
    };

demo
4.画像のリロードの原理は何ですか?
原理:ウェブページを閲覧する時に多くの画像が現れる時、例えば淘宝、京東、もし同時にすべてロードするならばとても遅くて、効率が低くて、ウェブページのカードが死ぬ情況を招くかもしれません.解決策:画像がユーザーの視線範囲内に表示されるまで、画像をロードしません.肝心なステップ:1画像が見えるかどうかを判断する:画面のスクロールの高さ+ウィンドウの高さ>画像からページの上部までの距離、それではその画像は見える;②変換ピクチャの可視状態:ピクチャロードはピクチャのsrc属性によって制御される.各ピクチャのsrcに同じ初期値を設定すると、リクエストが1回しか開始されず、ピクチャのsrcプロパティをデフォルトピクチャに設定できます.それから、画像がウィンドウに表示されるのを待って、画像のsrcパスを本当のsrcパスに変えて、画像の内容をロードすることができます.
コード#コード#
1.トップに戻る効果を以下のように実現
ページが一定の距離までスクロールすると、ウィンドウの右下隅に上部ボタンが表示され、ボタンをクリックするとページが上部にスクロールされます.プレビュー1 demo
2.以下の画像のリロード効果を実現する
プレビュー2 demo
3.無限スクロール効果を実現します.
ページがスクロールされると、無限にデータがロードされてページに表示されます.マウスを置くと変色のヒントが表示されます.下部のロードボタンが表示されるとajax送信要求でデータを取得し、appendをコンテナに送信します.イベントバインドはプロキシ方式を使用します.コード3 demo