# JavaScript 如何实现图片懒加载

URL: https://caijiao.org/how-to/javascript/intersection-observer-lazyload
Source: docs/how-to/javascript/intersection-observer-lazyload.md
Description: JavaScript 如何实现图片懒加载：用 IntersectionObserver 观察图片进入视口后再设置 src。 示例可直接复制到浏览器或项目代码中，并附相关教程、工具入口。

## 快速答案

用 IntersectionObserver 观察图片进入视口后再设置 src。

```js
const observer = new IntersectionObserver(entries => {
  for (const entry of entries) if (entry.isIntersecting) {
    entry.target.src = entry.target.dataset.src;
    observer.unobserve(entry.target);
  }
});
```

## 使用要点

- 把用户输入用于选择器、正则或 HTML 前要先转义。
- DOM 示例默认在浏览器中执行，放进框架组件时要等元素渲染完成。

## 相关内容

- [JavaScript / TypeScript 问题](/how-to/javascript/)
- [JavaScript 教程](/javascript/)
- [TypeScript 教程](/ts/)
- [JSON Formatter](/tool/json-formatter)
- [JSON Validator](/tool/json-validator)