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

        var clock;
        function isVisible($img) {
            var windowHeight = $(window).height();
            var scrollHeight = $(window).scrollTop();
            var offsetHeight = $img.offset().top;
            console.log(offsetHeight);
            console.log(scrollHeight + windowHeight);
            if (offsetHeight < windowHeight + scrollHeight) {
                return true
            };
            return false;
        }
        $(window).on('scroll', function () {
            if (clock) {
                clearTimeout(clock)
            };
            clock = setTimeout(function () {
                console.log(isVisible($('#show')))
            }, 300);
        })

題目2：當窗口滾動時奄薇，判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 。用代碼實現(xiàn)

        var clock;
        function isVisible($img) {
            var windowHeight = $(window).height();
            var scrollHeight = $(window).scrollTop();
            var offsetHeight = $img.offset().top;
            console.log(offsetHeight);
            console.log(scrollHeight + windowHeight);
            if (offsetHeight < windowHeight + scrollHeight) {
                return true
            };
            return false;
        }
        $(window).on('scroll', function () {
            if (clock) {
                clearTimeout(clock)
            };
            clock = setTimeout(function () {
                console.log(isVisible($('#show')))
            }, 300);
        })

題目3：當窗口滾動時舟茶，判斷一個元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時在控制臺打印 true，以后再次出現(xiàn)不做任何處理吧凉。用代碼實現(xiàn)

        var clock;
        function isVisible($img) {
            var windowHeight = $(window).height();
            var scrollHeight = $(window).scrollTop();
            var offsetHeight = $img.offset().top;
            if (offsetHeight < windowHeight + scrollHeight && offsetHeight > scrollHeight) {
                return true;
            };
            return false;
        }
       
        function isFirstLoaded($node) {
            if($node.hasClass('active')) {
                return true;
            }else {
                $node.addClass('active');
                return false;
            }
        }
        $(window).on('scroll', function () {
            if (clock) {
                clearTimeout(clock)
            };
            clock = setTimeout(function () {
                if(isVisible($('#show')) && !isFirstLoaded($('#show'))) {
                    console.log('first show')
                }
            }, 300);
        })

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

• 例如實現(xiàn)圖片的懶加載
  1. 把圖片添加一個自定義data-src屬性，把真實圖片地址放在自定義屬性里面
  2. 先檢查圖片是否出現(xiàn)在窗口視野中
  3. 檢查圖片是否已經加載
  4. 如果出現(xiàn)在視野中并且圖片還未被加載阀捅，把圖片自定義屬性值賦值到src屬性里面

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

懶加載事例