JavaScript懒加载详解

JavaScript懒加载是一种优化网站性能的技术，它可以在浏览器显示可见内容之后再延迟加载未显示内容，从而加快页面加载速度。下面将为你详细讲解JavaScript懒加载的完整攻略。

什么是JavaScript懒加载

JavaScript懒加载是指在页面加载时，将页面上的图片、视频、音频等资源暂时不加载，当用户滚动页面时再根据用户的可视范围加载相应的内容。这种方式可以有效地减轻页面的初始加载压力，达到优化网页性能的目的。

JavaScript懒加载的实现方式

以图片懒加载为例，JavaScript懒加载的实现方式可以分为以下几步：

1. 在HTML中将需要懒加载的图片的src属性设置为单独的自定义属性（如data-src）。

<img src="placeholder.jpg" data-src="real-image.jpg">

1. 使用JavaScript监听窗口滚动事件，在图片进入可视区域（视口）时，动态将data-src属性的值赋给src属性，实现图片的加载。

// 获取需要懒加载的图片
const lazyImages = document.querySelectorAll('img[data-src]');

// 监听窗口滚动事件
window.addEventListener('scroll', () => {
  // 遍历每张需要懒加载的图片
  lazyImages.forEach(lazyImage => {
    // 如果图片在可视区域内且未被加载过，则加载图片
    if (lazyImage.getBoundingClientRect().top < window.innerHeight && !lazyImage.src) {
      lazyImage.src = lazyImage.dataset.src;
    }
  })
})

1. 在CSS中为图片设置占位符，避免滚动时页面布局抖动。

img {
  width: 100%;
  height: auto;
  display: inline-block;
  background: #f5f5f5 url(placeholder.jpg) no-repeat center center;
  background-size: contain;
}

这就是利用JavaScript实现图片懒加载的完整过程，可以让网页的不必要资源不在页面加载时加载，增加页面的可用性与性能，并且在用户阅读时快速加载，提升用户体验。

实例说明

图片懒加载

如上述所述，下面给出一个简单示例，让你更好地理解图片懒加载。

<!-- HTML结构 -->
<img src="placeholder.jpg" data-src="real-image.jpg">
<img src="placeholder.jpg" data-src="real-image.jpg">
<img src="placeholder.jpg" data-src="real-image.jpg">
...

// JavaScript代码
const lazyImages = document.querySelectorAll('img[data-src]');

window.addEventListener('scroll', () => {
  lazyImages.forEach(lazyImage => {
    if (lazyImage.getBoundingClientRect().top < window.innerHeight && !lazyImage.src) {
      lazyImage.src = lazyImage.dataset.src;
    }
  })
})

视频懒加载

视频懒加载的实现方式与图片懒加载类似，只是其中涉及到的一些API有所不同，需要注意一下。

<!-- HTML结构 -->
<video poster="poster.jpg">
  <source data-src="video.mp4" type="video/mp4">
</video>

// JavaScript代码
const lazyVideos = document.querySelectorAll('video[data-src]');

window.addEventListener('scroll', () => {
  lazyVideos.forEach(lazyVideo => {
    if (lazyVideo.getBoundingClientRect().top < window.innerHeight && !lazyVideo.firstChild.src) {
      lazyVideo.firstChild.src = lazyVideo.firstChild.dataset.src;
    }
  })
})

以上是图片懒加载和视频懒加载的实现示例，你可以根据自己的需求进行详细的实现。