快捷導(dǎo)航

Vue lazyload圖片懶加載實例詳解

更新時間：2021年12月22日 14:31:49 作者：秋墨江雪

本文通過實例代碼給大家介紹了Vue lazyload圖片懶加載的相關(guān)知識，通過導(dǎo)入配置等操作src/main.jswenj ,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧

文檔：https://github.com/hilongjw/vue-lazyload

1.安裝

cnpm i vue-lazyload -S
或
npm i vue-lazyload -S

2.實例

導(dǎo)入配置等操作 src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
//【1】導(dǎo)入懶加載
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)//【1】懶加載使用（和下面一句2選1）
 
//【1】懶加載使用，且入全局配置，在使用處就不用配置錯誤圖片等（2選1）
// Vue.use(VueLazyload, {
//   preLoad: 1.3, //加載時間
//   error: 'dist/error.png', //圖片錯誤顯示此圖
//   loading: 'dist/loading.gif', //加載過程顯示此圖
//   attempt: 1 //默認加載張數(shù)
// })
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: {
        App
    }
})

使用懶加載src/components/lazy.vue

【1】定義圖片錯誤顯示等（引入圖片，如果是在js中。必須require進來）
【2】使用懶加載寫法 v-lazy='xxx'

<template>
    <div>
        <!--【2】使用懶加載寫法 v-lazy='xxx'-->
        <img v-lazy="imgUrl"/>
        <img v-lazy="imgObj" />
    </div>
</template>
<script>
     
export default{
    name:"lazy",
    data(){
        return{
        // 【1】定義圖片錯誤顯示等（引入圖片，如果是在js中。必須require進來）
        imgObj: {
            preLoad: 1.3, //加載時間
            src: "http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner1.jpg",//真正圖片
            error: require("../assets/error.jpg"),//如果錯誤顯示此圖
            loading: require("../assets/loadding.jpg"), //加載過程顯示此圖
            attempt: 1, //默認加載張數(shù)
        },
        imgUrl:"http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner2.jpg" //只加一條，即真正圖
        }
    }
}  
</script>
 
<style></style>

效果：圖片地址錯誤時加載到的圖片。加載過程就顯示加載過程圖片。