uni 页面加载完毕_uni-app图片未加载完处理

实现效果

1.图片未加载完看到的是 .new-img占位背景图片,.new_back透明度设置0;

2.图片加载失败显示设置的 loadImg 失败占位图片

3.图片加载完直接显示完整图片同时添加类名. loaded透明度设置1;

数据结构

@error="onImageError('newData', index)">

{{item.categoryName1}}

{{item.categoryName2}}

{{$t('home.home52')}} {{item.nowPrice | setMoney2(item.unit)}}

js部分

data() {

return {

newData: [],//数据

loadImg: "../../../static/errorImage.jpg"//失败加载图片

}

},

methods: {

//监听image加载完成

onImageLoad(key, index) {

this.$set(this[key][index], 'loaded', 'loaded');

},

//监听image加载失败

onImageError(key, index) {

this[key][index].image = this.loadImg;

},

}

样式部分

.new-img {

width: ((48 / 375) * 750)+rpx;

height: ((48 / 375) * 750)+rpx;

display: inline-block;

position: relative;

background: url("../../../static/loadYimg.jpg") no-repeat center;

background-size: 100%;

border-radius: 50%;

overflow: hidden;

.new_flag {

width: ((16 / 375) * 750)+rpx;

height: ((10.6 / 375) * 750)+rpx;

position: absolute;

bottom: ((4 / 375) * 750)+rpx;

right: 0;

}

.new_back{

width: 100%;

height: 100%;

transition: .2s;

opacity: 0;

&.loaded {

opacity: 1;

}

}

}