js中延迟加载和预加载的具体使用

2023年5月27日上午10:39 • JavaScript

下面我将详细讲解JS中延迟加载和预加载的使用攻略。

一、什么是延迟加载和预加载

1. 延迟加载

延迟加载（Lazy Load）是指在页面加载完成后，对于一些非必要的资源如图片、视频等等，先不进行加载，待页面滚动或者用户发生某些操作时再加载。这样可以让页面加载更快，提高用户的体验感。

2. 预加载

预加载（Preload）是指在页面正式加载之前，将一些可能需要的资源进行提前加载，当需要时即可直接使用，此时用户的响应时间非常快，用户体验更好。

二、延迟加载和预加载的具体使用

1. 延迟加载

图片延迟加载

图片延迟加载常用的方法是用 JS 监听滚动事件，当图片进入可视区域时，再进行图片的加载。

<!-- HTML部分 -->
<img src="placeholder.jpg" data-src="image.jpg" alt="图片">

<!-- JS部分 -->
<script>
  function lazyLoad() {
    const images = document.querySelectorAll('img');    //获取所有图片

    images.forEach(img => {
      const rect = img.getBoundingClientRect();   //获取图片区域的 top、right、bottom、left 等参数

      if (rect.top >= 0 && rect.bottom <= window.innerHeight) {    // 判断图片是否在可视区域内
        img.src = img.dataset.src;  // 加载图片
      }
    })
  }

  document.addEventListener('scroll', lazyLoad);   //监听滚动事件
</script>

上述代码中，首先通过 querySelectorAll 方法获取到当前页面的所有图片，然后使用 getBoundingClientRect 方法获取图片所在区域的 top、right、bottom、left 等参数。当滚动到图片所在的区域，图片的 top、bottom 都大于或等于 0 且小于窗口的高度时，则表示图片已经进入可视区域，此时将图片的 src 属性值设置为 data-src 即可。

JavaScript延迟加载

JavaScript 延迟加载通常是将页面中无关紧要的代码块，通过延迟加载的方式来减轻网页的加载时间。

例如：

<!-- 在 head 中加载使用的JS文件 -->
<head>
  <script src="main.js" defer></script>
</head>

<!-- 在 body 的底部加入辅助的JS文件 -->
<body>
  <h1>Hello World！</h1>
  <script src="helper.js" async></script>
</body>

上述代码中，我们使用 defer 属性和 async 属性来实现 JavaScript 延迟加载。当 defer 属性被设置时，脚本将在页面加载完成后再执行，但在 DOMContentLoaded 事件之前执行。当 async 属性被设置时，脚本将会异步地加载，不会影响页面的渲染，但脚本的加载和执行完全由浏览器控制，可能会在 DOMContentLoaded 事件之前或之后执行，这取决于脚本的大小、服务器的响应时间以及网络状况等。

2. 预加载

在使用预加载的时候，我们通常会从两个方面来入手，一个是使用浏览器中提供的 preload 机制，另一个是手动实现预加载。

使用浏览器内置的 preload 机制

可以通过在 head 标签中的 link 中加入 preload 来进行浏览器内置的预加载。例如：

<!-- 预加载字体资源 -->
<head>
  <link rel="preload" href="Roboto.woff2" as="font" type="font/woff2" crossorigin>
</head>

<!-- 预加载脚本资源 -->
<head>
  <link rel="preload" href="main.js" as="script">
</head>

手动实现预加载

手动实现预加载可以通过 JavaScript 代码来实现，例如：

<!-- HTML部分 -->
<img src="placeholder.jpg" data-src="image.jpg" alt="图片">

<!-- JS部分 -->
<script>
  const image = new Image();
  image.src = 'image.jpg';

  image.onload = function() {
    const img = document.querySelectorAll('img')[0];
    img.src = image.src;
  }
</script>

上述代码中，我们通过 new Image() 创建了一个图片对象，将预加载的图片赋值给这个对象的 src 属性，然后通过 onload 事件来监听图片加载完成后的事件，并通过 querySelectorAll 方法来获取文档中的图片，并将刚才预加载的图片对象赋给其中第一个图片的 src 属性。这样当图片需要显示时，已经预加载完成的图片就会直接显示出来，提高网页的响应速度。