ステップ16リロード

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

function isVisible($img){
    var winHeight = $(window).height();
    var scrollTop = $(window).scrollTop();
    var offsetTop = $img.offset().top;

    if(winHeight + scrollTop > offsetTop && offsetTop > scrollTop){
        return true;
    }
    return false;
}

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

    $(window).on('scroll',function(){
    var winHeight = $(window).height();
    var scrollTop = $(window).scrollTop();
    var offsetTop = $node.offset().top;

if(winHeight + scrollTop > offsetTop && offsetTop > scrollTop){
    console.log(true);
}
});
    }

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

   $(window).on('scroll',function(){
    var winHeight = $(window).height();
    var scrollTop = $(window).scrollTop();
    var offsetTop = $node.offset().top;
    if($node.attr('browsed')){
        return;
    }else if(winHeight + scrollTop > offsetTop && offsetTop > scrollTop){
        console.log(true);
        $node.attr('browsed',' ');
    }}
);

题目4:写真の怠惰なロードの原理は何ですか?
ページは最初は1画面のピクチャしか表示されず、残りのピクチャはピクチャurlアドレスを他の属性に書き込み、サービス要求を低減し、ユーザがウィンドウをスクロールして閲覧を継続することを検出した場合、ピクチャurlをsrc属性に書き込み、ユーザが閲覧した位置に応じて対応するピクチャをロードする.
タイトル5:画像のリロードを実現する