vue3实现图片的懒加载

实现数据懒加载在前面文章有写。

实现图片懒加载，思路是监听图片进入视口区域时给图片src添加图片地址，注册vue3的自定义属性来传递图片地址的值。现在开始写敲代码。

// 图片加载不出来时显示的图片
import defaultImg from '@/assets/images/200.png'

const defineDirective = (app) => {
  // 扩展自定义指令
  app.directive('lazyload', {
    // Vue2规则 ：vue.directive('lazyload',{ 
                // inserted () {}
               })
    // Vue3规则：mounted
    mounted(el, bindings) {
      // el表示使用指令的DOM元素
      // bindings表示指令相关的信息是一个对象
      // 指令的功能：实现图片的懒加载
      // 1、监听图片进入可视区
      const oberver = new IntersectionObserver(([{ isIntersecting }]) => {
        if (isIntersecting) {
          // 进入了可视区
          // 2、给图片的src属性赋值图片的地址
          el.src = bindings.value
          // 取消图片的监听
          oberver.unobserve(el)
          // 加载的图片失败了，显示默认的图片地址
          el.onerror = () => {
            // 显示默认图片
            el.src = defaultImg
          }
        }
      })
      oberver.observe(el)
    }
  })
}

export default {
  install(app) {
    // 自定义指令
    defineDirective(app)
  }
}

现在我们要使用自定义指令来传图片地址

<template>
  <div class="goods-item">
    <RouterLink to="/" class="image">
      //  v-lazyload取到了后端数据图片地址传给到
      //   IntersectionObserver函数里
      <img v-lazyload="goods.picture" alt="">

    </RouterLink>
    <p class="name ellipsis-2">{{goods.name}}</p>
    <p class="desc ellipsis">{{goods.desc}}</p>
    <p class="price">&yen;{{goods.price}}</p>
    <div class="extra">
      <RouterLink to="/">
        <span>找相似</span>
        <span>发现现多宝贝 &gt;</span>
      </RouterLink>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeGoods',
  props: {
    goods: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

以上就实现了图片的懒加载，可能有的老铁就会问用了数据懒加载，还有用图片懒加载的必要吗，这就要看你后端返回数据了，如果一次请求就返回少量的图片数据，那数据懒加载就够用，如果一次请求回来一堆图片数据，那用图片懒加载还是有必要的，因为用户可能就想看前几个图片，你这呼啦请求回来一堆图片犯不上，好了，就这样。

来吧，试试看