js可视区域加载

       当元素处于可视区域时再加载，例如淘宝天猫上打开网页时不是所有图片都加载出来了，而是当滚动条滚动到那个区域时才加载出来图片。

 

方法：判断元素顶部到浏览器窗口顶部的距离是否小于可视区域高度，如果小于就显示。这里可以用一个方法： getBoundingClientRect()，该方法返回一个对象，该对象存储了元素四个边界到浏览器窗口上边和左边的距离。

getBoundingClientRect方法：

代码：

运行结果：不知道为什么。。。结果的动图贴不上来。。。。口述一下好了：就是动画开始不加载，滚动条滚动到可以显示元素的时候才会开始加载动画。可以利用这个原理来实现图片的加载，就是图片到可视区域的时候给它赋src的值。