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