如何将所有img src替换为数据src用于Lazy Load Without jQuery

Question

我想让图像延迟加载，因此拥有数据src非常重要。这就是为什么我需要一个Javascript代码，它删除src并添加数据src。

顺便说一句，我应用了这个代码，但它不能正常工作

var imgEl = document.getElementsByTagName('img');
for (var i=0; i<imgEl.length; i++) {
if(imgEl[i].getAttribute('src')) {
imgEl[i].setAttribute('data-src',imgEl[i].getAttribute('src'));
imgEl[i].removeAttribute('src');
}
}

<img src="https://cdn.pixabay.com/photo/2020/07/03/10/28/waterfall-5365926__340.jpg" alt="img">

Answer 1

我建议您使用IntersectionObserver

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

将源代码放在<img/>标签的data-src属性中，让浏览器决定何时加载。

1. 初始化观察者

try {
IO = new IntersectionObserver(entries => {
entries.forEach((entry) => {
const lazyImage = entry.target;
if (typeof entry.isIntersecting !== "undefined") {
if (entry.isIntersecting && !lazyImage.src) {
lazyImage.src = lazyImage.dataset.src;
}
} else {
lazyImage.src = lazyImage.dataset.src;
}
});
});
} catch (err) {
console.log(err);
}

2. 加载页面时，告诉观察者要观看的内容

[...document.querySelectorAll('img[data-src]')].forEach(function (el) {
IO.observe(el);
});

API中有许多其他选项可以控制浏览器加载图像时的阈值。我在所有的项目中都使用它，它与默认选项配合得很好。