IntersectionObserver

LazyLoad

(function lazyLoad() {
	const imageToLazy = document.querySelectorAll("img[data-src]");
 
	const loadImage = function (image) {
		image.setAttribute("src", image.getAttribute("data-src"));
 
		image.addEventListener("load", function () {
			image.removeAttribute("data-src");
		});
	};
 
	const intersectionObserver = new IntersectionObserver(function (
		items,
		observer
	) {
		console.log(items);
 
		items.forEach(function (item) {
			if (item.isIntersecting) {
				loadImage(item.target);
 
				observer.unobserve(item.target);
			}
		});
	});
 
	imageToLazy.forEach(function (image) {
		intersectionObserver.observe(image);
	});
})();

参考阅读

• IntersectionObserver - Web API 接口参考 | MDN
• 如何判断元素是否在可视区域内呢？然后搞一些事情 - 掘金