vue自定义指令懒加载，vue懒加载的原理及实现_好文资源

Vue图片懒加载指令 v-imgLazy

IntersectionObserver 对象的observe() 方法向IntersectionObserver对象监听的目标集合添加一个元素。一个监听者有一组阈值和一个根，但是可以监视多个目标元素，以查看这些目标元素可见区域的变化。

简单来说可以监听dom元素进出可视区域，并且可以控制具体的变化。

具体的使用请看 IntersectionObserver API：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver/observe

新建一个directive用来存放自定义指令

directive/imgLazy.js

import baseImg from \’@/assets/logo.png\’// 创建一个监听器let observer = new IntersectionObserver((entries)=>{ // entries是所有被监听对象的集合 entries.forEach(entry =>{ if(entry.isIntersecting){ // 当被监听元素到临界值且未加载图片时触发。 !entry.target.isLoaded && showImage(entry.target,entry.target.dat活动：慈云数据爆款香港服务器，CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快，免备案，每月仅需19元！！点击查看a_src) } })})function showImage(el,imgSrc){ const img = new Image(); img.src = imgSrc; img.onload = ()=>{ el.src = imgSrc; el.isLoaded = true; }}export default { // 这里用inserted和bind都行，因为IntersectionObserver时异步的，以防意外还是用inserted好一点 // inserted和bind的区别在于inserted时元素已经插入页面，能够直接获取到dom元素的位置信息。 inserted(el,binding) { // 初始化时展示默认图片 el.src = baseImg; // 将需要加载的图片地址绑定在dom上 el.data_src = binding.value; observer.observe(el) }, unbind(){ // 停止监听 observer.disconnect(); }}

在main.js中使用,注册全局指令

main.js

import imgLazy from \’@/directive/imgLazy.js\’Vue.directive(\’imgLazy\’, imgLazy)

在组件中定义directives使用，给当前组件注册指令

import imgLazy from \’@/directive/imgLazy.js\’export default { // … directives: { imgLazy: imgLazy, }}

组件中使用

img{ width: 200px; height: 200px;}17428842

《vue自定义指令懒加载，vue懒加载的原理及实现》来自互联网同行内容，若有侵权，请联系我们删除！