一、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-lazyload

一、Vue懒加载

1.安装

2.实例

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

使用懒加载src/components/lazy.vue

最新文章

热门文章