zhonglxcx/zhonglmini/components/hyp-image/hyp-image.vue

<template>
	<!-- #ifndef H5 -->
	<view class="lazy-image">
		<image :class="['real-image', cname]" @load="onLoaded" :src="realSrc" mode="aspectFill"></image>
		<view :class="[loaded ? 'loaded' : '', cname]" :style="{ background: placeholdColor }">
			<image class="placehold-image" :src="placeholdSrc" mode="aspectFill"></image>
		</view>
	</view>
	<!-- #endif -->
	<!-- #ifdef H5 -->
	<view :class="['lazy-img', cname]">
		<image :src="realSrc" mode="aspectFill" @load="onLoaded"></image>
		<view :class="[loaded ? 'loaded' : '', 'lazy-mask']" :style="{ background: placeholdColor }"></view>
	</view>
	<!-- #endif -->
</template>

<script>
	export default {
		props:{
			cname: String,
			realSrc:{
				type:String,
				default:""
			},
			placeholdColor:{
				type:String,
				default:"#eee"
			},
			placeholdSrc:{
				type:String,
				default:""
			}
		},
		data(){
			return {
				loaded: false
			}
		},
		methods:{
			onLoaded(){
				this.loaded = true
			}
		}
	}
</script>

<style lang="scss">
	.lazy-image{
		height: 100%;
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		.real-image{
			width: 100%;
		}
		view{
			position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			transition: opacity .1s linear;
			.placehold-image{
				width: 100%;
			}
		}
		.loaded{
			opacity: 0;
		}
	}
	
	.lazy-img {
		position: relative;
		overflow: hidden;
		image {
			@include size(100%);
		}
		.lazy-mask {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			@include size(100%);
			transition: opacity .1s linear;
			&.loaded {
				opacity: 0;
			}
		}
	}
</style>