最近写加载大量图片的页面,由于服务器不给了,不能一次性加载全部图片,卡卡的,
于是参考很多github的例子以及博客园——“蜗牛闯红灯”大佬的博客,对页面进行优化,
当你鼠标拉下,浏览到某个div时候,才加载那一块的图片,简称:
1. 图片懒加载 lazy load在页面上的未可视区域可以添加一个滚动条事件,
判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。
什么是图片懒加载问题:对于图片过多的页面,为了加速页面加载速度,
所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。
这样子对于页面加载性能上会有很大的提升,也提高了用户体验。

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

被折叠的 条评论
为什么被折叠?



