vue片懒加载,vue片懒加载原理

需求：

图片数据未返回 + 图片数据返回为空 + 图片加载出错 时，图片采用默认图片展示。

解决：
先判断返回数据是否有，再通过img 的 load事件判断是否加载完成。

现象：

图片会先加载默认图片，等到请求的图片加载完成替换默认图片。
注意：
代码中 1 至 2 处是必须使用 v-show，若使用 v-if ，其中一个图片无效时，DOM中img标签则会全部为默认图片的img标签。

<template><div v-for="(activeItem, activeIndex) in activityList" :key="activeIndex"><div class="img-wrap"> <!-- 1 --><img :src="imgUrl + activeItem.Banner + '_0x0'" @load="activityLoad (activeItem.Banner, activeIndex)" v-show="activeItem.Banner && loadingImges[activeIndex]"><img :src="loadingImgSrc"v-show="!activeItem.Banner || !loadingImges[activeIndex]"> <!-- 2 --></div></template><script>const loadingimg = require('../assets/images/category/banner1.png')export default { data () { return { activityList: [], loadingImges: {},loadingImgSrc: loadingimg, } }, methoeds: { activityLoad (imgId, imgIndex) { if (imgId) {this.loadingImges[imgIndex] = true;} }, getList () { //获取到图片数组id，拼接为src } }}</script>