v-lazy 图片懒加载指令的实现

使用

  <ul>
    <li v-for="(item, index) in state.imgs" :key="index" border>
      <div class="item">
        <img v-lazy="item.url" :src="item.url" alt="" />
        <p>
          {{ item.content }}
        </p>
      </div>
    </li>
  </ul>

实现

// 当前图片是否需要展示
function isVisible(el: HTMLElement) {
  let windowHeight = window.innerHeight; // 返回窗口的文档显示区的高度，如果有垂直滚动条，也包括滚动条高度。

  let position = el.getBoundingClientRect(); // 方法返回元素的大小及其相对于视口的位置
  // 当元素的top偏移量小于页面大小并且大于高度的负数

  if (position.top < windowHeight && position.top > -position.height) {
    return true;
  }
  return false;
}

// 给图片设置正确的src
const lazyLoad = (img: HTMLElement, src?: string) => {
  console.log(1);

  if (img && src && isVisible(img)) {
    // 模拟网络请求慢的情况
    setTimeout(function () {
      img.setAttribute("src", src);
    }, 500);
  }
};

// 懒加载
const lazy = {
  mounted(el: HTMLElement, binding: any) {
    // 预设置一个代替的图片
    el.setAttribute(
      "src",
      "https://tse1-mm.cn.bing.net/th/id/R-C.764319db0b103f9edcac08842b453651?rik=nOM%2f%2bYrpvFyNWg&riu=http%3a%2f%2fimg.zcool.cn%2fcommunity%2f016ea057314efc0000002bf08c5256.gif&ehk=EI0ZnD397cFSVpHTK4URJJfxM0xjDprc5GCTMRvFaxs%3d&risl=&pid=ImgRaw&r=0"
    );

    lazyLoad(el, binding.value);
    window.addEventListener("scroll", function () {
      lazyLoad(el, binding.value);
    });
  },
  inserted: function (el: HTMLElement) {
    lazyLoad(el);
  },
};