懒加载和预加载

懒加载和预加载是两种优化网页性能的技术。懒加载在长页面中延迟加载图像,直到用户滚动到可视区,减少服务器压力并提升用户体验。预加载则在网页加载时预先加载部分内容,减少用户等待时间。实现方式包括定时器、条件加载和可视区监听等。两者各有优劣,需根据实际场景选择合适策略。
摘要由CSDN通过智能技术生成

1 懒加载

1.1 懒加载也叫延迟加载,指在长网页中延迟加载图像,是一种很好的优化网页性能的方式。常适用于图片很多,页面很长的电商网站。

1.2 实现方式

  1. 使用定时器(setTimeOut 或 setInterval) 进行加载延迟。

  2. 条件加载:符合某些条件才开始加载。

  3. 可视区加载,主要由滚动监听来实现。一般会在距用户看到某图片前一定距离遍开始加载,这样能保证用户下拉时正好能看到图片

1.3 实现原理
将图片 src 设为空字符串,而图片的真实路径则设置在自定义属性 data-original 中。
监听页面滚动事件,判断图片是否进入可视区,如果是,那就将图片==的 src 属性值设置为 data-original 的值。

1.4 优点

  1. 能提升用户的体验(如果长页面上所有图片都需要加载,等待会时间很长,影响用户体验)。
  2. 减少无效资源的加载,这样能减小服务器的压力和浏览器的负担。
  3. 防止并发加载的资源过多而阻塞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) 

总结
两者都是提高页面性能有效的办法,两者主要区别是一个是提前加载,一个是延迟加载甚至不加载。
懒加载对服务器有一定的缓解压力作用,而预加载则会增加服务器的压力。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

敲起来blingbling

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值