「lazyload」Lazy Load的实现

lazyload

前言

在对前端性能优化实践的时候，图片的获取是需要http请求的。如果我们在首屏加载的时候，就将所有的图片请求回来，这样会很费性能，也没有必要。如果图片很多，会造成卡顿、白屏的现象。因此，使用lazy load是优化的方法之一，让暂时看不到的图片先不加载，当我们需要看到的时候才去请求，减轻了性能的压力，也不影响用户体验。当然现在有很多现场的组件库可以使用，jq和react都有。但是懒加载的原理是什么呢？自己如何实现的？我们可以实践一下。

代码实现

1、要给图片懒加载，我们首先要在页面上给要插入图片的位置占个位。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Lazy-Load</title>
  <style>
    .img {
      width: 200px;
      height:200px;
      background-color: gray;
    }
    .pic {
      // 必要的img样式
    }
  </style>
</head>
<body>
  <p class="container">
    <p class="img">
      // 注意我们并没有为它引入真实的src
      <img class="pic" alt="加载中" data-src="./images/1.png">
    </p>
    <p class="img">
      <img class="pic" alt="加载中" data-src="./images/2.png">
    </p>
    <p class="img">
      <img class="pic" alt="加载中" data-src="./images/3.png">
    </p>
    <p class="img">
      <img class="pic" alt="加载中" data-src="./images/4.png">
    </p>
    <p class="img">
      <img class="pic" alt="加载中" data-src="./images/5.png">
    </p>
     <p class="img">
      <img class="pic" alt="加载中" data-src="./images/6.png">
    </p>
   </p>
</body>
</html>

这里，我们给img标签的自定义属性data-src设置真实的图片路径。

2、在懒加载的实现中，有两个关键的数值：一个是当前可视区域的高度，另一个是元素距离可视区域顶部的高度。当前可视区域的高度，在和现代浏览器及 IE9 以上的浏览器中，可以用 window.innerHeight 属性获取。在低版本 IE 的标准模式中，可以用 document.documentElement.clientheight 获取，这里我们兼容两种情况：

const viewHeight = window.innerHeight || document.documentElement.clientHeight

而元素距离可视区域顶部的高度，我们这里选用 getBoundingClientRect() 方法来获取返回元素的大小及其相对于视口的位置。对此 MDN 给出了非常清晰的解释：

该方法的返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的 CSS 边框集合。 DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right 和 bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

这里我们使用到的就是它的top属性。

3、具体实现：

<script>
    // 获取所有的图片标签
    const imgs = document.getElementsByTagName('img')
    // 获取可视区域的高度
    const viewHeight = window.innerHeight || document.documentElement.clientHeight
    // num用于统计当前显示到了哪一张图片，避免每次都从第一张图片开始检查是否露出
    let num = 0
    function lazyload(){
        for(let i=num; i<imgs.length; i++) {
            // 用可视区域高度减去元素顶部距离可视区域顶部的高度
            let distance = viewHeight - imgs[i].getBoundingClientRect().top
            // 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明元素露出
            if(distance >= 0 ){
                // 给元素写入真实的src，展示图片
                imgs[i].src = imgs[i].getAttribute('data-src')
                // 前i张图片已经加载完毕，下次从第i+1张开始检查是否露出
                num = i + 1
            }
        }
    }
    // 监听scroll事件
    window.addeventlistener('scroll', lazyload, false);
</script>

由于这里不断触发scroll的方法，scroll方法里面又不断地获取元素距离可视区域的高度，会导致不断的回流，因此是十分费性能的，在此我们要考虑节流。

参考自掘金小册：前端性能优化原理与实践

Lazy Load的实现

lazyload

前言

代码实现

相关阅读

栏目导航

推荐阅读

热门阅读