1 懒加载
1.1 懒加载也叫延迟加载,指在长网页中延迟加载图像,是一种很好的优化网页性能的方式。常适用于图片很多,页面很长的电商网站。
1.2 实现方式
-
使用定时器(setTimeOut 或 setInterval) 进行加载延迟。
-
条件加载:符合某些条件才开始加载。
-
可视区加载,主要由滚动监听来实现。一般会在距用户看到某图片前一定距离遍开始加载,这样能保证用户下拉时正好能看到图片。
1.3 实现原理
将图片 src 设为空字符串,而图片的真实路径则设置在自定义属性 data-original 中。
监听页面滚动事件,判断图片是否进入可视区,如果是,那就将图片==的 src 属性值设置为 data-original 的值。
1.4 优点
- 能提升用户的体验(如果长页面上所有图片都需要加载,等待会时间很长,影响用户体验)。
- 减少无效资源的加载,这样能减小服务器的压力和浏览器的负担。
- 防止并发加载的资源过多而阻塞js的加载,影响网站的正常使用。
2 预加载
2.1 预加载就是把所需资源提前加载,这样一来,之后需要用到时就直接从缓存读取资源。
在网页全部加载之前,对一些主要内容进行加载,可减少用户等待的时间。
2.2 实现方式
(1)使用img标签
<img src="http://pic26.nipic.com/20121213/6168183 0044449030002.jpg" style="display:none"/>
(2)通过CSS的background属性将图片预加载
background: url(http://abc/image01.png)
总结
两者都是提高页面性能有效的办法,两者主要区别是一个是提前加载,一个是延迟加载甚至不加载。
懒加载对服务器有一定的缓解压力作用,而预加载则会增加服务器的压力。