vue图片懒加载实例

(1)效果演示

如上图所示，在正式图片没有加载出来的时候，展示，默认图片，等待 正式图片加载好了，替换默认图片~~~

---

（2）代码演示

<template>
	<div>
		<div class="menu-list">
			<div v-for="item in news" :key="item.id" class="menu-list-item">
				<div>
					<img v-lazy="item.src" class="item-pic" alt="" />
					<div class="label">
						<div :class="[`status${item.status}`, 'label-left']"></div>
						<div :class="[`status${item.status}`, 'label-right']"></div>
						<div class="label-text">{{ item.status | activityST }}</div>
					</div>
				</div>
			</div>
			<div class="divide-line">
				<div class="line"></div>
				<div class="quadrilateral"></div>
				<div class="middle-text">往期活动</div>
				<div class="quadrilateral"></div>
				<div class="line"></div>
			</div>
			<div v-for="(item, index) in imgsList" :key="`imgs${index}`" class="menu-list-item" @click="goActivity(item.link)">
				<div>
					<img class="item-pic" v-lazy="item.src" alt="" />
					<div class="label">
						<div :class="[`status${item.status}`, 'label-left']"></div>
						<div :class="[`status${item.status}`, 'label-right']"></div>
						<div class="label-text">{{ item.status | activityST }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { Button, Cell, Toast, MessageBox } from 'mint-ui';

import Vue from 'vue';
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload, {
	preLoad: 0.1,
	error: 'https://img.dota2.com.cn/file/5c/02/5c02aaf4ee7c75b2155dbb94d90eae681573028796.png',
	loading:
		'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573116182172&di=50934db39064f980e6c01504742593ef&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01648957dd72990000012e7e25b5c3.gif',
	attempt: 1,
	listenEvents: ['scroll']
});

export default {
	name: 'MenuList',
	data() {
		return {
			imgsList: [
				{
					id: 1,
					name: '问卷活动',
					src: 'https://img.dota2.com.cn/file/67/bb/67bb43d677f1c2bce3718e354f3d184c1572942967.png',
					link: '',
					status: 0
				},
					{
					id: 2,
					name: '主播活动',
					src: 'https://img.dota2.com.cn/file/d2/ae/d2ae41060e1f95ccc475e63ae2d580e81572942992.jpg',
					link: '',
					status: 2
				},
				{
					id: 3,
					name: '20周年活动',
					src: 'https://img.dota2.com.cn/file/9e/27/9e273feb070cd34aa0520784589e45381572943034.jpg',
					link: '',
					status: 0
				},
			]
		};
	},
	mounted() {
		this.sortByKey(this.imgsList, 'id');
		this.sortByKey(this.news, 'id');
	},
	methods: {
		sortByKey(array, key) {
			return array.sort(function(a, b) {
				var x = a[key];
				var y = b[key];
				return x > y ? -1 : x < y ? 1 : 0;
			});
		}
	},
	filters: {
		activityST(val) {
			switch (val) {
				case 0:
					return '已结束';
					break;
				case 1:
					return '预热';
					break;
				case 2:
					return '进行中';
					break;
				default:
					return '已结束';
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../../../../css/_base.scss';
.menu-list {
	background: linear-gradient(180deg, #14132f 0%, #0e1223 100%);
	&:last-child {
		padding-bottom: rc(50);
	}
	.divide-line {
		display: flex;
		color: #383b4c;
		justify-content: center;
		align-items: center;
		margin-top: 1rem;
		.line {
			height: rc(1.5);
			width: rc(100);
			background: #383b4c;
		}
		.quadrilateral {
			transform: rotate(135deg);
			background: #383b4c;
			width: rc(12);
			height: rc(12);
		}
		.middle-text {
			padding: 0 rc(15);
		}
	}
	.menu-list-item {
		width: 100%;
		.item-pic {
			width: 92%;
			height: 16rem;
			margin-left: 4%;
			border-radius: 1rem;
			object-fit: fill;
			margin-top: 2rem;
			box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
		}
		.label {
			display: flex;
			color: #fff;
			font-size: rc(25);
			float: left;
			top: 0;
			margin-top: -15rem;
			margin-left: 1.9rem;
			.label-left {
				width: rc(80);
				height: rc(40);
				position: absolute;
				padding-left: rc(10);
				padding-top: rc(-5);
				z-index: 2;
			}
			.label-right {
				border-radius: 2.5rem;
				width: 3.5rem;
				height: 2.5rem;
				position: absolute;
				margin-left: 2.5rem;
			}
			.label-text {
				z-index: 2;
				margin-left: rc(13);
				font-size: rc(22);
				margin-left: 0.71rem;
				padding-top: 0.3rem;
			}
			.status0 {
				background: rgb(187, 174, 170);
			}
			.status1 {
				background: #bf4b5c;
			}
			.status2 {
				background: #67ae20;
			}
		}
	}
}
</style>