推荐答案
// www.javascriptcn.com code example
function lazyload(images) {
let imgElements = Array.from(document.querySelectorAll(images));
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
imgElements.forEach(img => {
observer.observe(img);
});
}本题详细解读
1. 函数定义
lazyload(images) 是一个接受一个选择器字符串 images 的函数，用于选择需要懒加载的图片元素。
2. 获取图片元素
let imgElements = Array.from(document.querySelectorAll(images)); 使用 document.querySelectorAll 获取所有匹配选择器的图片元素，并将其转换为数组。
3. 创建 IntersectionObserver 实例
const observer = new IntersectionObserver((entries) => {...}); 创建一个 IntersectionObserver 实例，用于监听图片元素是否进入视口。
4. 处理 IntersectionObserver 回调
entries.forEach(entry => {...}); 遍历所有被观察的图片元素。if (entry.isIntersecting) {...} 判断图片元素是否进入视口。img.src = img.dataset.src; 将 data-src 属性的值赋给 src 属性，从而加载图片。observer.unobserve(img); 停止观察已经加载的图片元素。
5. 开始观察图片元素
imgElements.forEach(img => {...}); 遍历所有图片元素，并开始观察它们。
6. 使用示例