<think>好的，我需要回答用户关于
JavaScript图片懒
加载的六种实现
方法的问题。首先，我得回忆一下常见的懒
加载技术，并确保覆盖不同的
方法。用户提到了参考资料的三种引用，其中引用[2]和[3]特别相关，可能涉及scroll事件、offsetTop、getBoundingClientRect、IntersectionObserver等
方法。
首先，我应该
整理出六种不同的实现方式。常见的包括：
1
. 使用scroll事件结合offsetTop
2
. 使用scroll事件结合getBoundingClientRect
3
. 使用Intersection Observer API
4
. 使用data属性配合scroll和resize事件
5
. 使用第三方库如lozad
.js
6
. 结合CSS类名和滚动监听
需要确认这些
方法是否都正确，并且
是否有足够的参考资料支持。引用[2]提到了scroll事件、offsetTop、getBoundingClientRect和IntersectionObserver，引用[3]展示了用querySelectorAll选择
图片。可能第三方库和CSS类名需要另外补充，但用户提供的引用中没有提到，可能需要根据通用知识补充。
接下来，每个
方法需要简要说明实现步骤，并给出代码示例。注意使用正确的LaTeX格式，比如行内公式用$
...$，独立公式用$$
...$$，但懒
加载可能涉及较少的数学公式，可能主要需要代码示例。
需要确保回答结构清晰，分点说明，每个
方法一个小标题，代码示例用代码块包裹，并参考用户提供的引用适当标注来源。例如，引用[2]提到了IntersectionObserver，所以相关部分需要标注[^2]。
另外，用户要求生成相关问题，可能涉及性能比较、优化
方法、兼容性处理等。需要确保问题相关且合理。
需要检查
是否有六种
方法，如果不够的话可能需要扩展，比如添加使用延迟
加载属性loading="lazy"，但这个
方法属于HTML属性，可能不算
JavaScript实现。或者考虑其他事件如MutationObserver来检测DOM变化，动态
加载图片。或者使用requestIdleCallback来优化性能。
可能需要调整
方法，确保有六种。例如：
1
. scroll + offsetTop
2
. scroll + getBoundingClientRect
3
. scroll节流优化
4
. IntersectionObserver
5
. 使用data属性并监听滚动和调整大小
6
. 结合MutationObserver动态
加载
但需要确认这些
是否都是不同的实现方式。例如，节流优化可能属于对scroll的优化，不算独立
方法。可能需要重新分类。
或者，考虑其他技术，如使用IntersectionObserver的polyfill，或者结合CSS的loading属性，但可能不符合
JavaScript的实现。需要确保每个
方法都是不同的实现方式。
可能的六种
方法：
1
. 基于scroll事件和offsetTop属性
2
. 基于scroll事件和getBoundingClientRect
方法
3
. 使用Intersection Observer API
4
. 使用data属性，结合scroll和resize事件（可能和前面两种scroll
方法有重叠，但可以分开）
5
. 结合Mutation Observer动态检测新
图片
6
. 使用第三方库如lozad
.js（虽然用户可能希望原生
方法，但作为第六种）
或者，可能将节流优化作为单独的一种
方法，但实际上是优化步骤。可能需要调整。
现在，根据引用[2]中的内容，提到了利用scroll事件，包括offsetTop和getBoundingClientRect，以及节流优化，然后IntersectionObserver。引用[3]是代码示例，选择img
.lazy-load元素。因此，可能需要将scroll事件的不同计算方式作为两种
方法，节流优化作为第三种，IntersectionObserver作为第四种，data属性作为第五种，第三方库作为第六种。
或者，将scroll事件的不同方式作为两种，加上节流优化作为第三种，IntersectionObserver作为第四种，使用loading属性作为第五种（虽然原生HTML），MutationObserver作为第六种。
但用户要求
JavaScript实现
方法，所以需要确保都是JS层面的。可能需要调整。
最终，确定以下六种
方法：
1
. 基于HTMLElement
.offsetTop的滚动监听
2
. 基于Element
.getBoundingClientRect
()的滚动监听
3
. 节流优化的滚动监听
4
. 使用Intersection Observer API
5
. 结合data属性动态
加载
6
. 使用MutationObserver检测动态添加的
图片
其中，前两种是计算位置的不同
方法，第三种是优化，第四种是较新的API，第五种是属性处理，第六种是动态DOM检测。这样可能覆盖六种方式。需要验证每种
是否有对应的实现和参考资料。
在引用[2]中，确实提到了offsetTop、getBoundingClientRect、节流优化和IntersectionObserver，所以前四种
方法可以基于此。第五种可能涉及将
图片URL存储在data属性中，并在需要时替换src，这在引用[3]中的代码示例有使用img
.lazy-load，可能使用data-src属性。第六种
方法可能需要使用MutationObserver来监听DOM变化，当新
图片添加到页面时进行懒
加载，这可能是一个独立的实现方式。
现在，开始组织回答：
每个
方法需要简要说明原理，给出代码示例，并标注引用。例如，
方法一和
方法二引用[2]，
方法四同样引用[2]，
方法五引用[3]中的代码示例。第六种
方法可能没有直接引用，但属于通用知识，所以可能不添加引用标注。
确保代码正确，比如使用addEventListener，替换data-src到src等。
最后，生成相关问题，比如比较不同
方法的优缺点，如何处理兼容性，如何优化性能等。
现在，开始撰写回答。</think>###
JavaScript 图片懒
加载的6种实现
方法教程
#### 1
. 基于
`scroll
`事件与
`offsetTop
`属性
通过监听页面滚动事件，利用
`offsetTop
`计算
图片位置，
判断是否进入可视区域。
```javascript
window
.addEventListener
('scroll', function
() {
const images =
document.querySelectorAll
('img
.lazy'
);
images
.forEach
(img => {
const imgTop = img
.offsetTop;
const scrollTop = window
.pageYOffset;
if
(imgTop < scrollTop + window
.innerHeight
) {
img
.src = img
.dataset
.src;
img
.classList
.remove
('lazy'
);
}
}
);
}
);
```
原理：当
图片的垂直偏移量（
`offsetTop
`）小于“视口高度 + 滚动距离”时
加载图片。
#### 2
. 基于
`scroll
`事件与
`getBoundingClientRect
()`
使用
`getBoundingClientRect
()`获取
图片相对视口的位置，实现更精确的
判断：
```javascript
window
.addEventListener
('scroll', function
() {
const images =
document.querySelectorAll
('img
.lazy'
);
images
.forEach
(img => {
const rect = img
.getBoundingClientRect
();
if
(rect
.top < window
.innerHeight && rect
.bottom >= 0
) {
img
.src = img
.dataset
.src;
img
.classList
.remove
('lazy'
);
}
}
);
}
);
```
优势：直接获取元素相对于视口的坐标，避免计算误差。
#### 3
. 节流优化滚动监听
通过节流函数减少
`scroll
`事件触发频率，提升性能：
```javascript
function throttle
(func, delay
) {
let lastCall = 0;
return function
(...args
) {
const now = new Date
().getTime
();
if
(now - lastCall < delay
) return;
lastCall = now;
func
.apply
(this, args
);
};
}
window
.addEventListener
('scroll', throttle
(function
() {
//
加载逻辑与上述
方法相同
}, 200
));
```
作用：将高频事件触发间隔控制在200ms内，降低性能消耗。
#### 4
. 使用
`Intersection Observer
` API
现代浏览器原生支持的观察器，无需手动计算位置：
```javascript
const observer = new IntersectionObserver
((entries
) => {
entries
.forEach
(entry => {
if
(entry
.isIntersecting
) {
const img = entry
.target;
img
.src = img
.dataset
.src;
observer
.unobserve
(img
);
}
}
);
}
);
document.querySelectorAll
('img
.lazy'
).forEach
(img => {
observer
.observe
(img
);
}
);
```
优点：代码简洁，性能高效，支持动态阈值配置。
#### 5
. 动态替换
`data-src
`属性
将
图片地址存储在
`data-src
`中，滚动时替换为
`src
`属性：
```html
<img class="lazy-load" data-src="image
.jpg" alt="Lazy Image">
```
```javascript
const lazyLoadImages =
document.querySelectorAll
("img
.lazy-load"
); // 引用[3]
window
.addEventListener
('scroll', function
() {
lazyLoadImages
.forEach
(img => {
if
(img
.getBoundingClientRect
().top < window
.innerHeight
) {
img
.src = img
.dataset
.src;
}
}
);
}
);
```
#### 6
. 使用
`MutationObserver
`动态检测新增
图片
适用于动态
加载内容的场景（如AJAX）：
```javascript
const observer = new MutationObserver
((mutations
) => {
mutations
.forEach
(mutation => {
mutation
.addedNodes
.forEach
(node => {
if
(node
.tagName === 'IMG' && node
.classList
.contains
('lazy'
)) {
// 触发懒
加载逻辑
}
}
);
}
);
}
);
observer
.observe
(document.body, { childList: true, subtree: true }
);
```
本文介绍并对比了在JavaScript中判断图片加载完成的方法，包括使用onload属性、原生JavaScript方法、jQuery方法，提供了代码示例和优缺点分析。
扫一扫
3864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
