网页页面延迟加载方案（提高页面的初始加载速度）

2025/12/16 17:41:30 来源：https://blog.csdn.net/2301_79858914/article/details/141831612 浏览: 次关键词：网页页面延迟加载方案（提高页面的初始加载速度）

当用户滚动到页面的某个部分时才加载相关图片的技术称为“延迟加载”（Lazy Loading）。这可以通过多种方式实现，以下是一些常见的方法：

1. 使用`loading="lazy"`属性（原生支持）

现代浏览器原生支持图片和iframe的延迟加载，通过在<img>标签中添加loading="lazy"属性，可以简单高效地实现延迟加载。

<img src="image.jpg" alt="example image" loading="lazy">

2. 使用Intersection Observer API

对于需要更复杂控制或在不支持loading="lazy"的浏览器中使用的场景，可以使用JavaScript中的Intersection Observer API。这是一种比较现代的方式，性能优越，可以监控元素是否进入视口（viewport）。

示例代码：

<img data-src="image.jpg" alt="example image" class="lazy"><script>// 检查浏览器是否支持Intersection Observerif ('IntersectionObserver' in window) {const lazyImages = document.querySelectorAll('img.lazy');const imageObserver = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {//isIntersecting表示目标元素是否与视口交叉 true表示与视口交叉，说明元素已经进入视口const img = entry.target;//事件源对象：也就是进入视口的元素img.src = img.dataset.src;//开始加载图片资源img.classList.remove('lazy');//图片加载完成，移除类名observer.unobserve(img); // 停止观察已加载的图片}});});//在调用 observe 方法之前，必须确保 IntersectionObserver 实例（imageObserver）已经正确创建并设置好回调函数。否则，可能会错过目标元素的交叉状态变化，因为观察器未准备好处理这些变化lazyImages.forEach(img => {imageObserver.observe(img);});} else {// 如果浏览器不支持Intersection Observer，可以使用其他的降级方案，比如立即加载图片const lazyImages = document.querySelectorAll('img.lazy');lazyImages.forEach(img => {img.src = img.dataset.src;});}
</script>

3. 使用JavaScript库

如果你不想自己实现或者需要更多功能，可以使用现成的JavaScript库，如 lazysizes。

使用lazysizes的示例：

<!-- 在HTML中引用lazysizes库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async></script><!-- 将图片的src替换为data-src，并添加`lazyload`类 -->
<img data-src="image.jpg" alt="example image" class="lazyload">

lazysizes库会自动处理图片的延迟加载，使用起来非常方便，且功能强大，支持自定义配置、事件回调等。

4. CSS背景图的延迟加载

如果你需要延迟加载背景图片，可以在元素接近视口时动态添加CSS类或者直接使用JavaScript设置background-image。

示例代码：

<div class="lazy-background" data-bg="background.jpg"></div><script>const lazyBackgrounds = document.querySelectorAll('.lazy-background');const backgroundObserver = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {entry.target.style.backgroundImage = `url(${entry.target.dataset.bg})`;observer.unobserve(entry.target);}});});lazyBackgrounds.forEach(bg => {backgroundObserver.observe(bg);});
</script>