vue3.0 实现图片延迟加载 自定义属性

根目录下创建文件 directive.js

export default function directive(app) {
  // 图片延迟加载
  let ob = new IntersectionObserver(changes => {
    changes.forEach(item => {
      let {
        target, // 被观察的目标元素，是一个 DOM 节点对象
        isIntersecting // 目标元素是否显示
      } = item;
      if (!isIntersecting) return;
      target.$imgBox.src = target.$src;
      target.$imgBox.style.opacity = 1;
      ob.unobserve(target); // 取消对某个目标元素的观察
    });
  }, {
    // 当目标元素和根元素相交的面积占目标元素面积的百分比到达或跨过某些指定的临界值时就会触发回调函数
    threshold: [0.5]
  });
  app.directive('lazyimg', {
    mounted(el, binding) {
      let imgBox = el.querySelector('img');
      if (!imgBox) return;
      imgBox.src = '';
      imgBox.style.opacity = 0;
      imgBox.style.transition = 'opacity .3s';
      el.$src = binding.value;
      el.$imgBox = imgBox;
      ob.observe(el); // 观察某个目标元素
    }
  });
};

main.js中进行使用 

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import directive from './directive';

const app = createApp(App);
app.use(router);
app.use(store);
directive(app);
app.mount('#app');

使用 Home.js

<div class="wrap-img" v-if="item.list_image_url" v-lazyimg="item.list_image_url">
  <img src="" alt="" />
</div>