lazyload

[yunyu950908]

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

        //判断是否出现在视窗
        function isVisible($node) {
            var offsetTop = $node.offset().top,
                scrollTop = $(window).scrollTop(),
                windowHeight = $(window).height(),
                windowTotal = scrollTop + windowHeight
            if (offsetTop < windowTotal && offsetTop > scrollTop) {
                return true
            } else {
                return false
            }
        }

题目2：当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现

        //滚动时判断是否可见
        function scroll($node) {
            $(window).on("scroll", function () {
                if (isVisible($node)) {
                    console.log("true")
                }
            })
        }

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

• 效果预览
• 代码地址

        //滚动时判断是否可见及是否加载
        function scroll($node) {
            $(window).on("scroll", function () {
                if (isVisible($node) && isLoad($node)) {
                    $node.data("load", "loaded")
                    console.log("true")
                }
            })
        }
        //判断是否加载过
        function isLoad($node) {
            if (!$node.data("load")) return true
        }

题目4： 图片懒加载的原理是什么？

原理：

• 先将img标签中的src链接设为同一张图片占位，将其真正的图片地址存储在img标签的自定义属性中（比如data-src）。
• 当js监听到该图片元素进入窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

[yunyu950908]

题目5：懒加载

• 代码地址

• 效果预览：