(1)效果演示

如上圖所示，在正式圖片沒有加載出來的時(shí)候，展示，默認(rèn)圖片，等待 正式圖片加載好了，替換默認(rèn)圖片~~~

---

（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 '已結(jié)束';break;case 1:return '預(yù)熱';break;case 2:return '進(jìn)行中';break;default:return '已結(jié)束';}}} }; </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> 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的vue图片懒加载实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。