如何实现懒加载_javascript中图片懒加载的原理是什么？-js教程-PHP中文网

如何实现懒加载_javascript中图片懒加载的原理是什么？

夜晨

发布： 2025-12-14 22:29:38

原创

106人浏览过

图片懒加载的核心是按需加载，即初始化时仅加载可视区图片，滚动至附近再加载其余图片，以减少首屏请求、提升渲染速度并节省带宽；关键依赖JavaScript检测元素是否进入视口，推荐使用Intersection Observer API，兼容方案为getBoundingClientRect或节流的scroll监听；实现上用data-src存真实地址、src设占位图，进入视口后替换并停止观察。

如何实现懒加载_javascript中图片懒加载的原理是什么？

图片懒加载的核心是“按需加载”——页面初始化时只加载可视区域内的图片，其余图片等到用户滚动到附近再加载。这样能减少首屏请求、加快渲染速度、节省带宽。

懒加载的关键判断依据：元素是否进入视口

浏览器本身不自动识别“图片是否可见”，需要 JavaScript 主动检测。常用方法有：

getBoundingClientRect()：获取图片元素相对于视口的坐标（top/bottom/left/right），判断其 top 是否小于视口高度、bottom 是否大于 0；
Intersection Observer API（推荐）：原生异步监听元素与视口的交叉状态，性能好、写法简洁，无需频繁监听 scroll 事件；
手动监听 scroll + throttle：兼容老浏览器，但容易造成卡顿，需节流控制检测频率。

实现步骤：从占位到真实图片替换

懒加载不是“不加载”，而是延迟加载。通常做法是：

HTML 中用 data-src 存真实图片地址，src 放占位图（如 1×1 透明 GIF 或 base64）；
JS 检测到图片即将进入视口时，把 data-src 的值赋给 src；
可选：加载完成后添加 loaded 类或触发事件，便于加动画或埋点。

一个最小可用的 Intersection Observer 示例

不用第三方库，几行代码就能跑起来：

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

立即学习“Java免费学习笔记（深入）”；

const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img); // 加载完就停止观察
    }
  });
});

lazyImages.forEach(img => observer.observe(img));

登录后复制