懒加载

题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现

        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：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现

        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：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现

        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： 图片懒加载的原理是什么？

• 例如实现图片的懒加载
  1. 把图片添加一个自定义data-src属性，把真实图片地址放在自定义属性里面
  2. 先检查图片是否出现在窗口视野中
  3. 检查图片是否已经加载
  4. 如果出现在视野中并且图片还未被加载，把图片自定义属性值赋值到src属性里面

题目5： 实现视频中的图片懒加载效果

懒加载事例