：JS-图片懒加载(LazyLoad)学习前端技术不得不提的——图片懒加载(LazyLoad)
在互联网的快车道上，网页加载速度就像是一场与时间的赛跑，而图片作为装点页面的重头戏，却常常因为其庞大的体积成为拖慢速度的“减速带”。这不，图片懒加载这位“加速小能手”应运而生，它如同一位智慧的调度员，让图片在最恰当的时刻才闪亮登场，大大提升了网页的首屏加载速度，让用户体验飞一般的感觉。下面，咱们就来聊聊图片懒加载的那些事儿，看看它是怎样施展魔法的。
图片懒加载的魔力所在
想象一下，你打开一个网页，还没等你往下翻，所有图片一股脑儿全涌进来，这不仅让加载速度慢如蜗牛，还可能消耗用户宝贵的流量。而图片懒加载的出现，就是为了解决这些问题。它巧妙地让浏览器先加载屏幕内可见区域的图片，至于那些还在屏幕外“待命”的图片，就先晾着，等到用户滚动页面，图片即将进入视线时，才迅速加载。这样一来，不仅首屏加载速度快如闪电，还帮用户省了流量，真是一举两得！
浏览器加载的幕后故事
在揭秘懒加载之前，咱们得先了解下浏览器加载页面的“剧本”。首先，浏览器读取HTML，搭起DOM这栋大楼的框架；接着，CSS和JavaScript这些装饰工上阵，把页面打扮得漂漂亮亮；最后，图片等“大块头”才开始下载。要是图片太多，网络通道就会堵得水泄不通，页面加载自然就慢下来了。
那么，如何让图片乖乖听话，该出手时才出手呢？别急，咱们一步步来。
1. HTML结构的小变动
首先，给图片标签动个小手术，把原本的src属性换成data-src。这样，图片就不会一上来就被加载了。比如这样：
html复制代码<img data-src="美图.jpg" alt="美丽风景">
2. 监听滚动，火眼金睛辨位置
接着，我们需要写一段JavaScript，让它像侦探一样监听页面的滚动。每当用户滚动，就检查图片是否接近或已经进入了可视区域。为了防止侦探过度热情（频繁触发事件），我们可以用“防抖”或“节流”技巧来控制频率。用Lodash的throttle函数是个不错的选择：
javascript复制代码window.addEventListener('scroll', _.throttle(checkImages, 200));
3. 动态加载，适时露面
当侦探发现目标图片已进入“射程”，就让图片正式登台亮相。怎么做呢？很简单，把data-src里的地址转移到src属性上，图片就乖乖加载了：
javascript复制代码function checkImages() { // ...判断逻辑... img.src = img.dataset.src; img.onload = function() { // 图片加载完成后的处理 }; img.removeAttribute('data-src'); }
4. 优化加载逻辑，避免过度渲染
别忘了，图片加载完后，最好把它从监听列表里移除，避免重复加载，浪费资源。另外，如果所有需要懒加载的图片都加载完毕，也可以考虑停止监听滚动事件，进一步优化性能。
代码实战演练
好了，理论说了一大堆，实践才是检验真理的唯一标准。下面是一个简单的懒加载实现示例可供参考：
html复制代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./common.css"> <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> </head> <body> <img data-price="20" data-src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1oc3eu.img?w=640&h=400&m=6"/> <img data-src="https://img.36krcdn.com/20190808/v2_1565254363234_img_jpg"> <img data-src="https://img.36krcdn.com/20190905/v2_1567641293753_img_png"> <img data-src="https://img.36krcdn.com/20190905/v2_1567640518658_img_png"> <img data-src="https://img.36krcdn.com/20190905/v2_1567642423719_img_000"> <img data-src="https://img.36krcdn.com/20190905/v2_1567642425030_img_000"> <img data-src="https://img.36krcdn.com/20190905/v2_1567642425101_img_000"> <img data-src="https://img.36krcdn.com/20190905/v2_1567642425061_img_000"> <img data-src="https://img.36krcdn.com/20190904/v2_1567591358070_img_jpg"> <img data-src="https://img.36krcdn.com/20190905/v2_1567641974410_img_000"> <img data-src="https://img.36krcdn.com/20190905/v2_1567641974454_img_000"> <script> const imgs = document.getElementsByTagName('img'); const num = imgs.length; let n = 0; document.addEventListener('DOMContentLoaded', () => { loadImage(); }) function loadImage() { // console.log('haha') // 是否在可视区？ let screenHeight = document.documentElement.clientHeight;// 一屏高度 // 滚动条 // 不同浏览器的兼容性问题 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(let i = 0; i < num; i++) { // console.log(imgs[i].offsetTop); if (imgs[i].offsetTop < screenHeight + scrollTop) { // 数据属性 // console.log(imgs[i].dataset.src, imgs[i].dataset.price) imgs[i].src = imgs[i].getAttribute('data-src'); n = i + 1; if(n === num) { // console.log('所有图片加载完毕'); window.removeEventListener('scroll', throttledLayLoad); } } } } const throttledLayLoad = _.throttle(loadImage, 300) window.addEventListener('scroll', throttledLayLoad); </script> </body> </html>
这段代码中，我们先选中所有带有data-src属性的图片，然后在页面加载完成后和滚动时检查图片位置，一旦符合条件就加载图片，整个过程流畅而高效。
尾声
通过图片懒加载，我们不仅优化了网页的加载速度，还提升了用户体验，尤其是在移动设备上，更是省时省流量的利器。当然，如果你不想从零开始编码，市面上也有一些成熟的库，如Lozad.js，它们封装好了懒加载的逻辑，让你的开发工作事半功倍。总之，图片懒加载是提升网页性能的必备技能，学会它，让你的网页加载如丝般顺滑，让用户爱不释手！
该文章在 2024/6/17 9:41:09 编辑过
400 186 1886
