关于页面的预加载和懒加载

我们在做有很多图片的页面的时候，出于用户体验的角度或是为了节约流量，以及减小服务器压力的角度，通常会将页面进行配置预加载或懒加载。
一、两者的区别：
预加载是为了在页面打开后，能够流畅展示页面效果，对页面上的附件进行预先加载，当所有图片都加载完成，再显示该页面。通常使用预加载，都会有一个loading页面来展示目前附件加载进度，常见于大型的H5动画，优点是加载完成后，页面运行流畅。缺点是，在完整展示页面效果之前，就把所有页面上的附件全部加载出来，耗费的流量和时间比较长。
懒加载：
懒加载就是事先把所有图片用一张很小的图片显示出来，当用户需要展示真正图片的时候，再去加载真实图片。常见于新闻app，图片列表，当未进入视图窗口时，用一张带有logo的灰色地图占位图占用该图片空间。当进入视图窗口，再加载图片。实现原理是在img的src属性上写占位图地址，在img上自定义一个属性如data-src写真实图片请求地址。当需要展示真实图片地址时，把data-src地址替换掉src地址。优点是页面加载速度快，需要加载的图片才加载。缺点是在运行很炫酷的效果时，肯定还是预加载把所有资源加载完，再运行好。
二、预加载的实现方法：
目前这方面的插件也挺多的，不需要自己去写，我个人使用的是preload.js，该插件可以支持图片、音频、视频的预加载，且加载的进度是按照文件大小来计算的，而非计算加载文件的个数来计算进度，这样进度更加准确。

<script type="text/javascript" src&#