安裝

npm install vue-lazyload --save-dev

main.js

import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad, {preLoad: 1,error: require('./assets/imgError.png'), // 錯誤圖片loading: require('./assets/imgLoading.png'), // 加載中圖片attempt: 2, })

index.vue

<template><div><div id="lazyload"><!-- img中使用圖片懶加載。 v-lazy代替:src --><div class="img"><div style="margin: 20px;" v-for="(item, index) in imgList" :key="index"> <img v-lazy="item" alt="" style="width: 50px;"></div></div></div></div> </template><script> export default {name: 'Lazyload',components: {},props: {},data() {return {imgList:[require('../assets/weatherIcon/W0.png'),require('../assets/weatherIcon/W1.png'),require('../assets/weatherIcon/W10.png'),require('../assets/weatherIcon/W13.png'),require('../assets/weatherIcon/W14.png'),require('../assets/weatherIcon/W15.png'),require('../assets/weatherIcon/W16.png'),require('../assets/weatherIcon/W17.png'),require('../assets/weatherIcon/W18.png'),require('../assets/weatherIcon/W19.png'),require('../assets/weatherIcon/W20.png'),require('../assets/weatherIcon/W30.png'),require('../assets/weatherIcon/W31.png'),require('../assets/weatherIcon/W32.png'),require('../assets/weatherIcon/W33.png'),require('../assets/weatherIcon/W34.png'),require('../assets/weatherIcon/W35.png'),require('../assets/weatherIcon/W36.png'),require('../assets/weatherIcon/W44.png'),require('../assets/weatherIcon/W45.png'),]}},filters: {},computed: {},watch: {},created() {},mounted() {},beforeDestroy() {},methods: {} } </script><style scoped lang="less"> #lazyload {background-color: #ccc;margin: 0 auto;.img {background-color: #ccc;} } </style>

總結

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

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