uni-app图片未加载完处理

实现效果

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

数据结构

        <!-- 数据列表 -->
        <view class="new_list-a flexbox justify-content-b align-items-c flex-wrap">
            <view class="new-child" v-for="(item,index) in newData" :key="index" @click="GoodsDetails(item)">
                <!-- 图片 -->
                <view class="new-img">
                    <image :src="item.image" class="new_back" :class="[item.loaded]" mode="aspectFill" lazy-load @load="onImageLoad('newData', index)"
                     @error="onImageError('newData', index)"></image>
                    <image :src="item.countryImg" lazy-load mode="scaleToFill" class="new_flag"></image>
                </view>
                <view class="new_p-a">{{item.categoryName1}}</view>
                <view class="new_p-b">{{item.categoryName2}}</view>
                <view class="colorh2D">{{$t('home.home52')}} {{item.nowPrice | setMoney2(item.unit)}}</view>
            </view>
        </view>

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

推荐阅读更多精彩内容

  • 7.1 压缩图片 一、基础知识 1、图片的格式 jpg:最常见的图片格式。色彩还原度比较好,可以支持适当压缩后保持...
    AndroidMaster阅读 1,493评论 0 12
  • 关于网络加载已经写完了,今天来给大家分享一下关于图像加载的知识,在开发中除了请求数据怎么显示之外,剩下的 最...
    deyson阅读 386评论 0 3
  • 提到前端性能优化中图片资源的优化,懒加载和预加载就不能不说,下面我用最简洁明了的语言说明懒加载和预加载的核心要点以...
    一只大橘阅读 201评论 0 4
  • 转载自VR设计云课堂Unity Shader入门精要》随书彩色插图 《Unity Shader入门精要》随书彩色插...
    水月凡阅读 194评论 0 0
  • 雷素敏坚持分享第87天,《天赋在错误归因中的丢失》 父母的错误归因如同扼杀孩子人格力量的咒语,把早慧神化,弄丢了孩...
    风雨之前阅读 11评论 0 0