如何判斷一個元素是否出現在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個函數 isVisible實現

        //jQuery寫法
        function isVisible($element) {
            let windowHeight = $(window).height()
            let elementOffsetTop = $element.offset().top  //獲取元素距離document頂端距離
            let scrollTop = $(window).scrollTop()  //獲取窗口滾動距離
            if(scrollTop + windowHeight > elementoOffsetTop && scrollTop < elementOffsetTop) {
                //出現了
                return true
            } else {
               //沒出現
                return false
            }
        }

當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。每次出現都在控制臺打印 true 。用代碼實現

        let $elemrnt = $(element)

        $(window).on('scroll',function() {
            if(isVisible($element)) {
                console.log('true')
            }
        })

當窗口滾動時，判斷一個元素是不是出現在窗口可視范圍。在元素第一次出現時在控制臺打印 true，以后再次出現不做任何處理。用代碼實現

        let $element = $(element）

        $(window).on('scroll',function() {
            if($element.attr('loaded')) {
                return
            }
            if(isVisible($element)) {
                console.log('true')
                $element.attr('loaded', true)   //元素已出現
            }
        })

圖片懶加載的原理是什么？

圖片懶加載的核心邏輯是判斷圖片是否出現在可視界面，當圖片出現在可視范圍時才加載圖片。
1.可以將圖片src存入一個自定義屬性，例如：data-src
2.判斷元素是否出現在可視區域
3.一旦圖片出現在可視區域，改變src的值

5

http://js.jirengu.com/zehidameva/2/edit

6

js中為后端代碼
http://js.jirengu.com/duvazimore/2/edit