圖片懶加載只有在使用到圖片時才會加載。可以提高瀏覽器的性能

使用

npm install vue-lazyload

vue項目中

main文件

import vueLazyload from 'vue-lazyload'

import vue from 'vue'

vue.use(vueLazyload) // 注冊插件

組件中

<img v-lazy="require('./assets/iconall.png')"/>

在這里我使用了require 引入方式 因為 插件是在main中引入的， 而vue只會對src里面的文件進行編譯，導致圖片路徑發生改變，從而vuelazyload 無法獲取到正確的路徑，所以使用了require方式引入圖片。

在注冊組件時，設置配置項

vue.use(vueLazyload,{error:'圖片路徑',loading:‘圖片路徑’ })

error 是圖片獲取失敗時展示的拖

loading 是加載中展示的圖片。

我們在組件中還可以對一些標簽單獨設置

?<!-- <div v-lazy-container="{selector:'img',loading:require('./assets/logo.png')}">

? ? ? ? ? ?<img :data-src='require("./assets/index.png")' alt="1" class="ab">

? ? ?</div> -->

selector 就是選擇器， 里面的 img代表的是 img標簽。

然后還有好多配置項，我感覺都用不上，所以也沒有一一列出來。

?如果有補充的，可以在評論下留言。

總結

以上是生活随笔為你收集整理的vue-lazyload 图片懒加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。