js手动实现简易懒加载----LazyLoad

前言

在网页加载中，对于一些存在很多Image的网页，一次加载所有图片，会造成性能浪费，图片优化的方法有很多，例如base64、雪碧图等，图片懒加载也是比较常见的一种性能优化的方法

原理

给页面中img标签设定自定义属性data-original,用来存放真正的img源URL，给所有img的src属性设定为一张静态图片或者不设置

监听窗口滚动scroll事件，遍历图片计算图片是否出现在浏览器可视窗口内

当图片出现在视窗中时再给他赋予真实的图片地址，这样可以保证首屏的加载速度然后按需加载图片。

如何判断元素是否在可视区域

方法一

getBound(el) {
  let clientHeight = document.documentElement.clientHeight, //获取屏幕可视窗口高度
  offsetTop = el.offsetTop, //获取元素相对于文档顶部的距离
  scrollTop = el.documentElement.scrollTop //获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
  return offsetTop - screenTop < clientHeight //返回true则加载图片
}

方法二 

getBound(el) {
  let bound = el.getBoundingClientRect()
  let clientHeight = window.innerHeight
  // 图片距离顶部的距离 <= 浏览器可视化的高度，从而推算出是否需要加载
  return bound.top <= clientHeight - 100
}

getBoundingClientRect 

返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。

DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

图片及引用都来自getBoundingClientRect

方法三（更新）

发现一个浏览器的API，IntersectionObserver API 使用教程

代码暂未更新。。。

代码实现

代码基于React框架实现，使用方法二来判断图片是否出现在可视区域

HTML

<div className="img-warpper">
  <img
    className="lazyload"
    // alt="哦豁"
    data-original="https://media1.giphy.com/media/2A7yoKf2B87kotTApZ/200w.webp"
  />
</div>
<div className="img-warpper">
  <img
    className="lazyload"
    // alt="哦豁"
    data-original="https://media1.giphy.com/media/2A7yoKf2B87kotTApZ/200w.webp"
  />
</div>
<div className="img-warpper">
  <img
    className="lazyload"
    // alt="哦豁"
    data-original="https://media2.giphy.com/media/3h1rwFW1PpLxD9xLUR/200w.webp"
  />
</div>
<div className="img-warpper">
  <img
    className="lazyload"
    // alt="哦豁"
    data-original="https://media0.giphy.com/media/69v5dFsLtzdpaFZz2N/200w.webp"
  />
</div>
<div className="img-warpper">
  <img
    className="lazyload"
    // alt="哦豁"
    data-original="https://media0.giphy.com/media/69v5dFsLtzdpaFZz2N/200w.webp"
  />
</div>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  text-align: center;
}

img {
  width: 100%;
  max-width: 300px;
  height: 200px;
}

.img-warpper {
  width: 100%;
  height: 200px;
  max-width: 300px;
  margin-bottom: 100px;
}

JS

class LazyLoad {
  constructor(el) {
    this.array = Array.from(document.querySelectorAll(el))
    this.init() //初始化
  }
  init() {
    this.load() //首次调用，判断页面中图片是否加载
    window.addEventListener('scroll', () => {
      this.load()
    })
  }
  load() {
    //遍历所有节点调用函数判断是否加载图片
    this.array.forEach(item => this.getBound(item) && this.loadImg(item))
  }
  getBound(el) {
    //判断图片是否出现在可视窗口中
    let bound = el.getBoundingClientRect()
    let clientHeight = window.innerHeight
    // 图片距离顶部的距离 <= 浏览器可视化的高度，从而推算出是否需要加载
    return bound.top <= clientHeight - 100 // -100是为了看到效果，您也可以去掉
  }
  loadImg(el) {
    //将自定义属性赋值给标签src属性
    el.src = el.getAttribute('data-original')
  }
}

优化

对于比较大的图片记载事件可能会长一些，可以使用静态图片占位

对于频繁触发的滚动事件，可以考虑函数节流和防抖，有空在分享