前端:lazy load(图片懒加载)——加载显示大量图片的页面优化

本文介绍了在前端开发中,为优化大量图片加载的页面性能,使用图片懒加载(lazy load)技术的方法。通过监听滚动条事件,判断图片是否进入可视区域,再动态赋值真实图片源,提高用户体验。同时提到了在网络慢、电脑卡或图片加载错误时,显示加载动效的处理方式,并提及实现该功能所需的jQuery、jquery.lazyload和urchin.js等库。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

   最近写加载大量图片的页面,由于服务器不给了,不能一次性加载全部图片,卡卡的,

于是参考很多github的例子以及博客园——“蜗牛闯红灯”大佬的博客,对页面进行优化,

当你鼠标拉下,浏览到某个div时候,才加载那一块的图片,简称:

1. 图片懒加载 lazy load在页面上的未可视区域可以添加一个滚动条事件,

判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。

  什么是图片懒加载问题:

  对于图片过多的页面,为了加速页面加载速度,
所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。

这样子对于页面加载性能上会有很大的提升,也提高了用户体验。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值