五分钟教你用JS实现前端优化之懒加载与预加载

最新推荐文章于 2024-09-11 14:16:25 发布

MCM Code

最新推荐文章于 2024-09-11 14:16:25 发布

阅读量1.9k

点赞数 17

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/mcm0115/article/details/136791462

版权

文章目录

1. 懒加载（Lazy Loading）
2.预加载（PreLoading）

1. 懒加载（Lazy Loading）

懒加载是一种前端优化技术，用于延迟加载页面上的某些内容，以提高初始加载速度和减少初始加载资源的数量。

1.1 工作原理

初始时只加载页面上的必要内容，如可视区域内的图片、文本等。
当用户滚动或进行特定操作时，再加载其他内容，如屏幕外的图片、下拉加载更多数据等。
通过监听滚动事件或其他交互事件，判断何时加载额外内容。

1.2 优点

减少初次加载时所需的网络带宽和时间。
提高页面的响应速度和用户体验。
避免在用户未查看的情况下加载不必要的内容。

1.3 懒加载实例

// 1. 监听滚动事件，判断是否加载图片
window.addEventListener('scroll', function() {
  // 2. 获取所有需要懒加载的图片元素
  const lazyImages = document.querySelectorAll('img[data-src]');
  
  // 3. 遍历每个需要懒加载的图片
  lazyImages.forEach(function(img) {
    // 4. 判断图片距离顶部的位置是否在可视区域内
    if (img.getBoundingClientRect().top < window.innerHeight && img.getAttribute('data-src')) {
      // 5. 将data-src属性的值赋给src，触发实际加载
      img.setAttribute('src', img.getAttribute('data-src'));
      // 6. 清除data-src属性，避免重复加载
      img.removeAttribute('data-src');
    }
  });
});

这段代码里使用了 img.getBoundingClientRect().top 得到了当前图片到顶部位置的距离，当距离小于屏幕长度（即window.innerHeight），则图片在可视区域内需要进行加载。

具体应用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lazy Loading Example</title>
  <style>
    .image {
      width: 300px;
      height: 200px;
      margin: 20px;
    }
  </style>
</head>
<body>
  <h1>Lazy Loading Example</h1>

  <!-- 图片元素，data-src用于存储真实图片地址 -->
  <img class="image" data-src="https://via.placeholder.com/300.png" alt="Lazy Loaded Image 1">
  <img class="image" data-src="https://via.placeholder.com/300.png" alt="Lazy Loaded Image 2">
  <img class="image" data-src="https://via.placeholder.com/300.png" alt="Lazy Loaded Image 3">

  <script>
    // 监听滚动事件
    window.addEventListener('scroll', function() {
      // 获取所有需要懒加载的图片元素
      const lazyImages = document.querySelectorAll('img[data-src]');
      
      // 遍历每个需要懒加载的图片
      lazyImages.forEach(function(img) {
        // 判断图片距离顶部的位置是否在可视区域内
        if (img.getBoundingClientRect().top < window.innerHeight && img.getAttribute('data-src')) {
          // 将data-src属性的值赋给src，触发实际加载
          img.setAttribute('src', img.getAttribute('data-src'));
          // 清除data-src属性，避免重复加载
          img.removeAttribute('data-src');
        }
      });
    });
  </script>
</body>
</html>

2.预加载（PreLoading）

预加载是指在实际需要使用资源之前提前将其加载到内存中。这通常应用于图片、视频或其他网络资源，在用户需要访问它们时能够更快地获取和展示。预加载可以改善用户体验，减少等待时间，并在特定场景下提高性能。

2.1 工作原理

预加载通过创建新的 JavaScript Image 对象并设置其 src 属性来实现。当设置了 src 后，浏览器会立即开始加载对应的资源，无需等到该资源显示在页面上才开始加载。当资源被完全加载后，可以根据需要将其添加到页面中显示。

2.2 优点

预加载可以改善用户体验，减少等待时间，并在特定场景下提高性能。

2.3 预加载实例

// 1. 创建一个新的Image对象
const preloadedImage = new Image();
// 2. 设置要预加载的图片的URL
preloadedImage.src = 'path/to/image.jpg';
// 3. 当图片加载完成后执行回调函数
preloadedImage.onload = function() {
  console.log('Image preloaded');
  // 4. 将图片添加到页面中
  document.body.appendChild(preloadedImage);
};

在这个例子中，首先创建了一个新的 Image 对象，然后设置要预加载的图片的 URL。接着监听 onload 事件，当图片加载完成后执行相应的回调函数，在回调函数中可以将图片添加到页面中显示。
这样，在实际需要使用该图片时，由于已经提前加载到内存中，用户可以立即看到图片，而无需再等待加载时间。

具体应用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Preloading Example</title>
  <style>
    .preloaded-image {
      width: 300px;
      height: 200px;
      margin: 20px;
    }
  </style>
</head>
<body>
  <h1>Image Preloading Example</h1>

  <!-- 创建一个用于预加载的图片元素 -->
  <script>
    // 创建一个新的Image对象
    const preloadedImage = new Image();

    // 设置要预加载的图片的URL
    preloadedImage.src = 'path/to/image.jpg';

    // 当图片加载完成后执行回调函数
    preloadedImage.onload = function() {
      console.log('Image preloaded');

      // 将图片添加到页面中
      const imageContainer = document.createElement('div');
      imageContainer.appendChild(preloadedImage);
      document.body.appendChild(imageContainer);
    };
  </script>
</body>
</html>