怠惰なロードの実現

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

function isVisible($img){
        var scrollTop  = $(window).scrollTop()
        var windowHeight = $(window).height()
        var imgTop = $img.offset().top
        var imgHeight = $img.outerHeight(true)
        if (imgTop <= scrollTop + windowHeight && scrollTop < imgTop + imgHeight){
            return true;
        }
        return false;
    }

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

    function isShowLog($img){
        if (isVisible($img)){
            console.log('target 1 is show')
            return true;
        }
        console.log('false')
        return false;
    }

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

    function showOneTimeLog($img){
        if (!$img.hasClass('showNow') && isVisible($img)){
            $img.addClass('showNow')
            console.log('|target 2 is show|')
            return true;
        }
        return false;
    }

题目4:写真の怠惰なロードの原理は何ですか?ページに画像をロードする場合は、画像を一度にすべてダウンロードするのではなく、画面に表示されるか、画面に表示される可能性のある画像のみをダウンロードしてドキュメントストリームにロードします.
効果のプレビュー