图片懒加载的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

上一篇:【题解】P3919 - 遥远的国度


下一篇:noip14