当元素处于可视区域时再加载，例如淘宝天猫上打开网页时不是所有图片都加载出来了，而是当滚动条滚动到那个区域时才加载出来图片。
方法：判断元素顶部到浏览器窗口顶部的距离是否小于可视区域高度，如果小于就显示。这里可以用一个方法： getboundingclientrect()，该方法返回一个对象，该对象存储了元素四个边界到浏览器窗口上边和左边的距离。
getBoundingClientRect方法：
代码：
产品图片局部放大效果js特效代码
下载
JS产品图片局部放大效果，鼠标移到产品图片上可局部放大，点击图片可浏览完整产品大图，鼠标移动到左侧箭头可上下滚动缩略图，兼容主流浏览器。 使用方法： 1. head区域引用文件 mzp-packed.js，lrtk.css，magiczoomplus.css 2. 在你的文件中加入区域代码 3. lrtk.js
可视区域加载
运行结果：不知道为什么。。。结果的动图贴不上来。。。。口述一下好了：就是动画开始不加载，滚动条滚动到可以显示元素的时候才会开始加载动画。可以利用这个原理来实现图片的加载，就是图片到可视区域的时候给它赋src的值。
相关推荐：
