页面占位图

1、为什么需要使用占位图？

1.1让用户感知此处正在加载一张图片，优化体验。

1.2实现文档更快的加载，js相应的更快。

1.3预占位，当图片加载完成后不改变文档结构布局（需要预占位图片与真实图片大小一致）。

2、

依据onload事件判断图片是否加载完成，然后显隐占位图。

<div v-for="(activeItem, activeIndex) in activityList" :key="activeIndex" class="activity-wrap">
	<div class="img-wrap">
		<img 
			:src="imgUrl + activeItem.Banner + '_0x0'" 
			:alt="activeItem.ActivityName" 
			@load="activityLoad (activeItem.Banner, activeIndex)" 
			v-show="loadingImges[activeIndex]"
		>
		<img 
			:src="loadingImgSrc"
			v-show="!loadingImges[activeIndex]"
		>
	</div>
</div>

const loadingimg = require('../assets/images/category/activity-placeholder.png')

data () {
	return {
        loadingImges: {},
		loadingImgSrc: loadingimg,
    }
}
methods: {
    activityLoad (imgId, imgIndex) {
		if (imgId) {
			this.loadingImges[imgIndex] = true;
		}
	},
}

3、判断图片加载完成的方法

https://blog.youkuaiyun.com/zhuchunyan_aijia/article/details/52016962