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

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

當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 。用代碼實(shí)現(xiàn)

        let $elemrnt = $(element)

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

當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時(shí)在控制臺打印 true，以后再次出現(xiàn)不做任何處理。用代碼實(shí)現(xiàn)

        let $element = $(element）

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

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

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

5

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

6

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