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

2021-06-28 18:59:35 阅读：197 来源： 互联网

图片懒加载在日常开发过程中经常会使用到，一般情况下的实现思路是先判断图片是否出现在页面内，然后替换图片的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

标签：load,el,lazy,vue,src,指令,加载,图片
来源： https://blog.csdn.net/qq_45752104/article/details/118309601

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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