做前端开发或搭建网站时，图片多的页面总容易出现“加载慢、卡顿”的问题——比如电商商品列表页、资讯详情页，一屏要加载几十张图片，用户打开页面要等半天，还没看到内容就可能直接关掉。其实解决这个问题很简单，用“图片懒加载”就能轻松搞定。很多人觉得懒加载需要复杂的代码，其实现在原生HTML就能实现，新手也能快速上手。今天就用大白话把HTML图片懒加载讲透，从原理到实操，再到避坑要点，看完就能直接用。
先搞懂核心：什么是图片懒加载？简单说，就是让图片“按需加载”——不是页面一打开就加载所有图片，而是只加载用户当前能看到的可视区域内的图片；等用户向下滚动页面，快要看到下方图片时，再加载对应的图片。这样能大幅减少页面初始加载的资源量，让页面打开速度变快，还能节省用户的流量，尤其是移动端用户，体验提升特别明显。
为什么一定要做图片懒加载？除了提升加载速度，还有两个关键好处：一是降低服务器压力，页面初始加载的图片少了，服务器接收的请求就少，不会因为同时有大量用户访问而卡顿；二是提升用户留存，加载速度快了，用户愿意多停留，比如电商页面加载顺畅，用户才会有耐心往下翻找商品。对有大量图片的网站来说，懒加载不是“可选优化”，而是“必须做好的基础操作”。
最省心的方法：原生HTML自带懒加载，一行代码搞定。很多人不知道，HTML5早就新增了原生的懒加载属性，不用写复杂的JS代码，直接给img标签加个loading属性就行，兼容性也很好，现在主流浏览器（Chrome、Safari、Edge、微信浏览器等）都支持。
具体用法特别简单，原来的img标签是这样的：<img src="商品1.jpg" alt="商品名称">。只要加上loading="lazy"，就变成了懒加载模式：<img src="商品1.jpg" alt="商品名称" loading="lazy">。就这一个小改动，就能实现基础的懒加载功能。
这里要注意loading属性的三个可选值，根据需求选就行：一是lazy（懒加载），就是我们要的按需加载效果；二是eager（立即加载），和没加这个属性一样，页面打开就加载图片，适合首屏核心图片；三是auto（自动判断），让浏览器自己决定是否懒加载，一般不推荐，不如直接指定lazy明确。
原生懒加载的适用场景：大部分普通网站，比如企业站的产品列表、资讯站的配图、个人博客的图片等，只要图片不是首屏必须显示的，都能加这个属性。首屏的图片（比如首页轮播图、顶部Banner图）建议不加，保持立即加载，避免用户打开页面看到空白。
进阶用法：JS实现自定义懒加载，适配更多场景。如果你的网站需要更灵活的懒加载逻辑，比如自定义加载时机、加载时显示动画、适配一些老旧浏览器，就需要用JS来实现。核心原理很简单：先不给img标签设置真实的src属性，而是把图片地址存放在data-src这类自定义属性里；然后监听页面滚动事件，判断图片是否进入可视区域；如果进入了，再把data-src的值赋给src，实现图片加载。
给大家一个简单的JS实现示例，直接复制就能用：
首先是HTML结构，用data-src存真实图片地址，src放占位图（可以是一张小尺寸的空白图或加载中图标）：<img class="lazy" data-src="商品2.jpg" src="占位图.png" alt="商品名称">
然后是JS代码，监听滚动事件并判断加载：
// 获取所有需要懒加载的图片 const lazyImages = document.querySelectorAll('.lazy'); // 监听滚动事件（加节流优化，避免频繁触发） window.addEventListener('scroll', throttle(checkLazyLoad, 200)); // 页面加载完成后先检查一次首屏图片 window.addEventListener('load', checkLazyLoad); // 检查图片是否进入可视区域 function checkLazyLoad() { lazyImages.forEach(img => { // getBoundingClientRect()获取元素位置，判断是否在可视区域内 const rect = img.getBoundingClientRect(); if (rect.top < window.innerHeight && rect.bottom > 0) { // 进入可视区域，加载图片 img.src = img.dataset.src; // 加载完成后移除lazy类，避免重复检查 img.classList.remove('lazy'); } }); } // 节流函数（优化性能） function throttle(fn, delay) { let lastTime = 0; return function() { const now = Date.now(); if (now - lastTime > delay) { fn.apply(this, arguments); lastTime = now; } } }
这个示例里加了“节流”优化，因为滚动事件会频繁触发，节流能减少函数执行次数，提升页面性能。另外，页面加载完成后先检查一次首屏图片，避免首屏图片因为没滚动而不加载。
JS实现的适用场景：需要自定义加载效果（比如加载时显示“加载中”文字）、适配老旧浏览器、需要提前加载（比如图片还没完全进入可视区域就开始加载）的场景，比如电商App的H5页面、图片密集的摄影网站等。
几个实操避坑要点，一定要注意：
1. 首屏图片别懒加载：首屏是用户打开页面最先看到的内容，首屏图片如果懒加载，会导致页面出现空白，影响用户体验。建议首屏图片正常加载，只对第二屏及以后的图片做懒加载。
2. 给图片设置固定尺寸或占位符：如果图片没有固定宽高，加载时可能会导致页面布局错乱、抖动。可以给img标签设置width和height属性，或者用CSS固定尺寸；也可以用占位图占位置，避免布局偏移。
3. 别忽略SEO：搜索引擎爬取图片时，主要识别src属性的值。如果用JS懒加载，一定要确保爬虫能获取到真实的图片地址。原生懒加载因为用的是src属性，不影响SEO；JS懒加载用data-src的话，建议同时在img标签加alt属性（写清楚图片内容），帮助搜索引擎识别。
4. 测试不同场景：懒加载实现后，要在不同设备、不同网络环境下测试。比如在手机上测试滚动加载是否正常，在弱网环境下测试图片是否能顺利加载，避免出现“图片加载不出来”“滚动时卡顿”等问题。
最后总结一下：HTML图片懒加载的核心是“按需加载”，新手优先用原生的loading="lazy"，简单高效；需要更灵活的需求再用JS实现。做好懒加载能大幅提升网站加载速度和用户体验，尤其是图片多的网站，一定要安排上。如果你的网站有大量图片但还没做懒加载，现在就可以动手修改，几分钟就能看到效果。
