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、判斷圖片載入完成的方法