标签：vue Vue lazyload import 加载 图片

一、Vue懒加载

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

1.安装

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

2.实例

导入配置等操作 src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
//【1】导入懒加载
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 //默认加载张数
// })

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, //默认加载张数
        },
        imgUrl:"http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner2.jpg" //只加一条，即真正图
        }
    }
}   
</script>

<style></style>

效果：图片地址错误时加载到的图片。加载过程就显示加载过程图片。

标签：vue,Vue,lazyload,import,加载,图片
来源： https://www.cnblogs.com/chenxi188/p/12176868.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。