uni-app图片未加载完处理

实现效果

1.图片未加载完看到的是 .new-img占位背景图片,.new_back透明度设置0;
2.图片加载失败显示设置的 loadImg 失败占位图片
3.图片加载完直接显示完整图片同时添加类名. loaded透明度设置1;

数据结构

        
        
            
                
                
                    
                    
                
                {{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;
                    }
                }
            }