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

        function isVisible($node) {
            var offsetTop = $node.offset().top
            var winH = $(window).height()
            if(offsetTop >scrollY && offsetTop < (winH+scrollY)){
                console.log('可見')
            }else{
                console.log('不可見')
            }
        }

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

        $(window).on('scroll', isVisible)
        function isVisible($node) {
            var $node = $('.node')
            var offsetTop = $node.offset().top
            var winH = $(window).height()
            if((offsetTop+$node.height()) >scrollY && offsetTop < (winH+scrollY)){
                console.log(true)
            }else{
                console.log(false)
            }
        }

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

        var show = false
        $(window).on('scroll', function () {
            if (!show) {
                isVisible()
            } else {
                return
            }
        })

        function isVisible($node) {
            var $node = $('.node'),
                offsetTop = $node.offset().top,
                winH = $(window).height()
            if ((offsetTop + $node.height()) > scrollY && offsetTop < (winH + scrollY)) {
                console.log(true)
                show = true
                return true
            } else {
                return false
            }
        }

題目4： 圖片懶加載的原理是什么？

1. 將圖片真正的地址放到自定義屬性中,等待調(diào)用. 而src中可以放同一張代表加載中的圖片,這樣只需加載一次圖片, 也不會(huì)出現(xiàn)x
2. 判斷圖片是否可見, 如果可見就把自定義屬性中的地址放回src中, 開始加載圖片

題目5： 實(shí)現(xiàn)視頻中的圖片懶加載效果

demo

題目6： 實(shí)現(xiàn)視頻中的新聞懶加載效果

代碼