前端技能：懒加载和预加载

什么是懒加载和预加载？为什么需要懒加载和预加载？

概念

懒加载和预加载是常用的web优化的手段，用于提升提升用户体验。

  • 预加载：是指在页面加载完成之前，提前将所需资源下载， 图片加载完毕后可通过onload方法显示出来，或者放在缓存中，之后使用的时候从调用；

  • 懒加载：是延迟加载，需要满足一定条件的时候再加载对应的资源，例如窗口滑动到某个位置才显示相应的图片，减少不必要的请求，缓解服务器压力。

特点

  • 提高网页加载速度

  • 减少后台服务器压力

  • 提升用户体验

实现原理

以下以图片的加载为例。

预加载

在某些网站浏览一组图片时，只给你显示第一张图片，然后可以通过一些形式（点击按钮）来切换图片，在你浏览第一张图片时，其实一整组图片都预加载完了，之后切换就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>preLoad</title>
</head>
<body>
  <div class="container">
    <!-- loading.gif是占位符，默认图片 -->
    <img src="loading.gif" alt="pic" />
    <button onclick="onLeft()">Left</button>
    <button onclick="onRight()">Right</button>
  </div>
  <script>
    //获取图片元素
    var img = document.querySelector('img');
    //设置索引
    var index = 0;
    //图片资源
    var imgData = ['img1.png', 'img2.png', 'img3.png', 'img4.png', 'img5.png'];
    //预加载图片
    function preLoad() {
      imgData.forEach((path) => {
        //创建一个Image对象并设置图片的src属性，这样就可以预加载图片
        var image = new Image();
        image.src = path;
      });
    }
    preLoad();
    img.src = imgData[index];
    //左按钮点击事件
    function onLeft() {
      index--;
      if (index < 0) {
        index = imgData.length - 1;
      }
      img.src = imgData[index];
    }
    //右按钮点击事件
    function onRight() {
      index++;
      if (index > imgData.length - 1) {
        index = 0;
      }
      img.src = imgData[index];
    }
  </script>
</body>
</html>

懒加载

当图片数量比较多时，要是一次性请求加载，加载时间可能需要数十秒。所以可以先出现用户界面需要的图片，将来可能需要出现在页面上的，等将来到了再加载。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lazyload</title>
</head>
<body>
  <div class="container">
    <!-- loading.gif是占位符，默认图片 -->
    <img src="loading.gif" alt="pic" data-src="img1.png">
    <img src="loading.gif" alt="pic" data-src="img2.png">
    <img src="loading.gif" alt="pic" data-src="img3.png">
    <img src="loading.gif" alt="pic" data-src="img4.png">
    <img src="loading.gif" alt="pic" data-src="img5.png">
  </div>
  <script>
    //获取页面上所有的img元素，并存储在变量imgs中
    var images = document.querySelectorAll('img');
    //定义一个函数lazyload
    function lazyLoad() {
      //获取页面滚动的高度，当前页面相对于窗口显示区左上角的Y位置
      var scrollTop = window.pageYOffset;
      //遍历所有的img元素
      images.forEach((image) => {
        //判断图片是否在可视区域内
        if (image.offsetTop < (window.innerHeight + scrollTop)) {
          //如果在可视区域内，就将图片的data-src属性的值赋给src属性
          image.src = image.getAttribute('data-src');
        }
      });
    }
    //监听页面滚动事件
    window.onscroll = lazyLoad();
  </script>
</body>
</html>

总结

预加载和懒加载都是基础的前端开发技能，了解并善用是必须的。

前端
#技术 #前端 #javascript
前端技能：懒加载和预加载
https://asuka24601.github.io/2022/12/21/前端技能：懒加载和预加载/
作者
Asuka24601
发布于
2022年12月21日
许可协议