前面做了个招聘页面，里面有大量的图片需要加载。
一开始都是全部写在页面中，在测试环境还看不出很慢，一放到正式环境就不对了。
微信浏览器本来就觉得慢，现在一下子要加载这么多图片，一下子就把屏幕弄白了，过了几十秒后才会完整的出现Loading图片。
这显然是无法忍受的，马上就加了预加载的功能，我只是简单的使用了一下。
我先给img赋个空白图，然后通过JS来给src赋data-src中的值，预加载的逻辑从网上找到了相关代码。
还配备了YSlow和PageSpeed性能工具。
在Waterfall中有资源加载记录，加了data-src属性的图片会在JS脚本之后再载入，这样的话就不会影响Loading效果显示了。
一般懒加载就是当你做滚动到页面某个位置，然后再显示当前位置的图片，这样做可以减少页面请求。
当页面过长的时候就会出现滚动条，而当年滚动到下面的时候，上面的页面就会看不到，下图中绿色部分就是那隐藏的页面。
通过计算，可以获取图片的两个距离值，图中标注了，然后判断是否在当前可视区域的顶部和底部的范围内，如果是就加载图，不是就不加载。
假设滚动条是在body中，那么当前可视区域的范围是：
而图片的top和height是：
在上面出现了几个尺寸的概念。
最后在给某个容器绑定“scroll”事件，上面的话是给“window”绑定。
参考资料：
<a href="http://www.cnblogs.com/v10258/p/3376455.html" target="_blank">Javascript图片预加载详解</a>
本文转自 咖啡机（K.F.J） 博客园博客，原文链接：http://www.cnblogs.com/strick/p/5372694.html，如需转载请自行联系原作者