如何在 vue3 上延遲加載圖像？

Question

嗨，伙計們，我制作了 giphy 搜索應用程序，但圖像加載緩慢，我怎樣才能使其延遲加載？

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

Answer 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>