1.判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）

 var $div= $('.b')
    function  isVisible($div) {
        var scrollTop = $(window).scrollTop()       //頁(yè)面滾動(dòng)高度
        var windowHeight = $(window).height()    //窗口高度
        var offsetTop = $div.offset().top                //$div位于頁(yè)面的高度
        if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
            return true
        }
        return false
    }

懶加載.png

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

$(window).on('scroll', function(){
        if (isVisible($div)) {
            console.log(true)
        }
    })
var $div= $('.b')
    function  isVisible($div) {
        var scrollTop = $(window).scrollTop()
        var windowHeight = $(window).height()
        var offsetTop = $div.offset().top
        if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
            return true
        }
        return false
    }

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

var clock   //默認(rèn)為
    $(window).on('scroll', function () {
        if (clock) {
            return
        } else if (isVisible($div)) {
            console.log(true)
            clock = true
        }
    })


var $div= $('.b')
    function  isVisible($div) {
        var scrollTop = $(window).scrollTop()
        var windowHeight = $(window).height()
        var offsetTop = $div.offset().top
        if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
            return true
        }
        return false
    }

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

1. 對(duì)于所有的 img 標(biāo)簽，把真實(shí)的地址放入自定義屬性data-img
2. 當(dāng)滾動(dòng)頁(yè)面時(shí)，檢查頁(yè)面所有的 img 標(biāo)簽，看看這個(gè)標(biāo)簽是否出現(xiàn)到我們的視野，當(dāng)出現(xiàn)在我們的視野時(shí)，再去判斷它是否已經(jīng)加載過(guò)，如果沒(méi)有加載過(guò)，令img的src等于data-src，( $img.attr('src', $img.attr('data-src')))

懶加載代碼示范