原理

优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能

原理：

一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。

实现思路：

  1. 加载loading图片

  2. 判断哪些图片要加载【重点】

    当图片距离顶部的距离top-height等于可视区域h和滚动区域高度s之和时说明图片马上就要进入可视区了

  3. 隐形加载图片

    创建一个临时图片，new Image() ，不会加载到页面上去，实现隐形加载

  4. 替换真图片

    替换src属性

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function lazyload() {
  const imgs = document.getElementsByTagName('img');
  const len = imgs.length;
  // 视口的高度
  const viewHeight = document.documentElement.clientHeight;
  // 滚动条高度
  const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
  for (let i = 0; i < len; i++) {
    const offsetHeight = imgs[i].offsetTop;
    if (offsetHeight < viewHeight + scrollHeight) {
      const src = imgs[i].dataset.src;
      imgs[i].src = src;
    }
  }
}

文章作者: Mr. Fortunate
文章链接: https://www.fortunate.cool/2022/09/24/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 fortunate！
java 服务器 前端
评论