进阶16-懒加载

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

function isVisible($node){
            var scrollTop = $(window).scrollTop(),
                windowHeight = $(window).height(),
                offsetTop = $node.offsetTop(),
                nodeHeight = $node.outerHeight()

            if(offsetTop + nodeHeight> scrollTop && offsetTop < windowHeight + scrollTop){
                return true
            }else{
                return false
            }
        }

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

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

4.图片懒加载的原理是什么？

在页面载入的时候，先指向同一个loading图，将图片的真实地址存放在data-src中

![](loading.gif)

获取并保存页面上的img，遍历img，判断是否出现在可视范围内；如果出现了就把data-src中的地址赋给src，并且给该img添加个class（.load）标记，表示已经加载过了。

5.实现视频中的图片懒加载效果
效果

6.实现视频中的新闻懒加载效果
代码
效果

gif006.gif