HUA

懒加载：让网页像优雅的绅士，只展示该展示的内容

你是否曾打开一个图片密集的网页，等待加载时焦虑地敲打桌面？今天，让我们一起探索懒加载技术如何解决这个痛点！

为什么需要懒加载？

想象一下：你打开一个电商网站，页面瞬间请求50多张大图！这就像早高峰地铁站所有乘客同时挤向闸机，结果必然是拥堵不堪。传统图片加载方式带来的问题显而易见：

  • 带宽浪费：用户可能只看前几张图，却加载了所有图片
  • 性能瓶颈：同时发起大量请求导致页面卡顿
  • 用户体验差：首屏加载时间过长，用户流失率高

懒加载原理揭秘

懒加载的核心思想就像一位优雅的管家：只在需要时展示内容。具体实现方式如下：

 1
 2<img src="large-image.jpg" alt="大图">
 3
 4
 5<img src="placeholder.gif" data-original="large-image.jpg" lazyload="true">

关键技术点：

  1. 使用data-*属性存储真实图片地址
  2. src属性使用轻量占位图
  3. 添加lazyload标记便于JS识别
  4. 监听滚动事件，动态替换src

实现代码深度解析

HTML结构 - 优雅的占位符

 1<img class="image-item" 
 2     lazyload="true"
 3     src="https://misc.360buyimg.com/mtd/pc/common/img/blank.png"
 4     data-original="真实大图地址">
  • 仅1KB的透明占位图，避免阻塞渲染
  • data-original保存真实图片地址
  • 统一尺寸确保布局稳定

JavaScript - 智能加载控制器

 1const lazyload = function() {
 2  const viewHeight = document.documentElement.clientHeight;
 3  const eles = document.querySelectorAll('img[data-original][lazyload]');
 4  
 5  Array.prototype.forEach.call(eles, function(item) {
 6    const rect = item.getBoundingClientRect();
 7    
 8    
 9    if (rect.bottom >= 0 && rect.top < viewHeight) {
10      const img = new Image();
11      img.src = item.dataset.original;
12      
13      img.onload = function() {
14        
15        item.src = item.dataset.original;
16        
17        item.removeAttribute('data-original');
18        item.removeAttribute('lazyload');
19      }
20    }
21  })
22}
23
24
25window.addEventListener('scroll', lazyload);
26document.addEventListener('DOMContentLoaded', lazyload);

关键逻辑解析：

  1. getBoundingClientRect()获取元素位置信息
  2. 判断图片是否进入视口（rect.top < viewHeight）
  3. 使用Image对象预加载图片
  4. 加载完成后替换src并清理属性

性能优化点

  • 滚动事件节流：实际项目中应添加节流函数
  • 内存管理：加载后移除属性减少后续遍历元素数量
  • 错误处理：添加onerror回调避免加载失败阻塞

懒加载的现代进化：Intersection Observer API

传统滚动监听存在性能隐患，现代浏览器提供了更优雅的方案：

 1const observer = new IntersectionObserver((entries) => {
 2  entries.forEach(entry => {
 3    if (entry.isIntersecting) {
 4      const img = entry.target;
 5      img.src = img.dataset.original;
 6      observer.unobserve(img);
 7    }
 8  });
 9});
10
11document.querySelectorAll('img[lazyload]').forEach(img => {
12  observer.observe(img);
13});

优势对比：

方式性能复杂度兼容性
滚动监听中等高优秀
IntersectionObserver高低IE部分不支持

最佳实践指南

  1. 首屏优先：确保首屏图片直接加载
  2. 占位图设计：使用CSS色块或低分辨率预览图
  3. 尺寸预设：避免布局抖动（CLS问题）
  4. 错误回退：添加alt文本和加载失败处理
  5. 加载动画：使用CSS动画提升用户体验

懒加载的适用场景

  1. 电商平台商品列表页
  2. 图库/相册展示网站
  3. 社交媒体信息流
  4. 长文档中的插图
  5. 地图应用中的标记点

总结

懒加载不仅是性能优化手段，更是以用户为中心的设计哲学。通过本文，我们了解到：

  • 懒加载通过data-*属性和滚动监听实现
  • 现代浏览器提供更高效的IntersectionObserver API
  • 正确实现可提升50%+的页面加载速度
  • 结合占位图和加载动画可优化用户体验

优雅的网页如同绅士：不急于展示所有，只在恰当时机呈现最合适的内容

个人笔记记录 2021 ~ 2025