前端
面试题
前端
面试题

6.常见的图片懒加载方式有哪些？

图片懒加载可以延迟图片的加载，只有当图片即将进入视口范围才进行加载，这可以大大减轻页面的加载时间，并降低宽带消耗，提高了用户的体验。以下就是常见的实现方法：

1. IntersectionObserver

它是一种用于异步检查文档中元素与视口叠加程度的API，可以将其用于检测图片是否已经进入视口了，并根据需要进行相应的处理

let observer = new IntersectionObserver(function(entries) {
	entries.forEach(function(entry) {
		if (entry.isIntersecting) {
			const lazyImage = entry.target;
			lazyImage.src = lazyImage.dataset.src;
			observer.unobserve(lazyImage);
		}
	});
});

const lazyImages = [...document.querySelectorAll(".lazy")];


lazyImages.forEach(function(image) {
	observer.observe(image);
});

2. 自定义监视器

可以通过自定义监视器来实现懒加载，其中，应该避免在滚动事件处理程序中频繁进行图片加载，因为这可能会影响性能，相反，使用自定义监听器只会在滚动停止时进行图片加载

function lazyLoad() {
	const images = document.querySelectorAll(".lazy");
	const scrollTop = window.pageYOffset;
	images.forEach((img) => {
		if (img.offsetTop < window.innerHeight + scrollTop) {
			img.src = img.dataset.src;
			img.classList.remove("lazy");
		}
	});
}

let lazyLoadThrottleTimeout;
document.addEventListener("scroll", function() {
	if (lazyLoadThrottleTimeout) {
		clearTimeout(lazyLoadThrottleTimeout);
	}
	lazyLoadThrottleTimeout = setTimeout(lazyLoad, 20);
});

实现思路就是监听scroll事件，然后通过全局变量减少滚动事件触发的频率，在事件中判断图片在视口了就显示图片

3. 总结

无论使用那种方法，都需要为懒加载的图片设置占位符，并将未加载的图片路径保存在data属性中，以便在需要时进行加载，这些占位符可以是简单的div或者样式类，用于预留图片的空间，避免页面布局的混乱

<!-- 占位符⽰例 -->
		<div class="lazy-placeholder" style="background-color:
#ddd;height: 500px;"> </div>
		<!-- 图⽚⽰例 -->
		<img class="lazy" data-src="path/to/image.jpg" alt="预览图" />