如何在 vue3 上延迟加载图像？答案

【问题标题】：How can i do lazy loading images on vue3?如何在 vue3 上延迟加载图像？
【发布时间】：2021-01-08 19:41:47
【问题描述】：

大家好，我制作了 giphy 搜索应用，但图片加载缓慢，我怎样才能让它延迟加载？

直播：https://giphse.vercel.app/ 源：https://github.com/korayguler/giphse

【问题讨论】：

【解决方案1】：

您可以使用 vue-lazyload 库来执行此操作。

1- 首先，使用 npm 安装包：

npm i vue-lazyload

2- 之后将 VueLazyload 插件添加到您的 Vue 应用程序中：

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)
 
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})
 
new Vue({
  el: 'body',
  components: {
    App
  }
})

3- 然后你可以在任何地方使用它：

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

【讨论】：

但是 vue-lazyload 只运行 vue 1 和 2
Vue-Lazyload 不支持 VueJS 3