图片懒加载的vue指令实现方式

图片懒加载在日常开发过程中经常会使用到，一般情况下的实现思路是先判断图片是否出现在页面内，然后替换图片的src属性从而控制图片的加载。这一思路比较简单，但是每次使用时都需要重复计算图片的距离页面高度，比较繁杂，这一次通过Vue的自定义指令实现图片懒加载，只需要在需要图片需要懒加载时将src改为对应的指令即可，使用非常方便。
具体使用方式：

<img class="img" v-lazyload="imgSrc" alt="">

此处主要应用的Vue的Vue.directive功能，实现了一个lazyload的自定义组件。
懒加载功能的实现主要通过IntersectionObserverAPI，这个API可以获取到元素和视窗之间是否有交叉，以及交叉部分的尺寸位置等，是一个用途很广泛的API。

实现代码：

// lazyload.js
const observer = new IntersectionObserver(observerCb, {
  root: null,
  threshold: [0],
  rootMargin: '30px'
})

function lazyLoad(el, binding) {
	// 若图片已经加载了，则return
  const src = el.getAttribute('src')
  if (src) {
    el.setAttribute('lazy-load', 'loaded')
    return
  }
  
  // binding参数中包含有指令的名称name，值value，参数arg等信息
  const { value } = binding
  if (!value) return
  
  // 将图片的src绑定到lazy-load-src上，并将状态改为loading
  el.setAttribute('lazy-load-src', value)
  el.setAttribute('lazy-load', 'loading')
  observer.observe(el)
}

function observerCb(entries) {
  entries.forEach(item => {
  	// 如果图片出现在视窗内
    if (item.intersectionRatio > 0) {
      const el = item.target
      const isLoaded = el.getAttribute('lazy-load')
      // 若图片已经加载，则取消观测
      if (isLoaded === 'loaded') {
        observer.unobserve(el)
      } else {
      	// 获取图片的src，并将其赋值到src，启动图片加载
        const src = el.getAttribute('lazy-load-src')
        el.setAttribute('src', src)
        el.setAttribute('lazy-load', 'loaded')
        observer.unobserve(el)
      }
    }
  });
}

export default lazyLoad

通过Vue.directive创建lazyload指令

import Vue from 'vue'

import lazyLoad from "./lazyload";
Vue.directive('lazyload', lazyLoad)

体验：https://github.com/377-dsq/ddcom/tree/master/src/directives