小程序图片加载

小程序图片加载(实现加载中、加载失败、空图等效果

图中实现的效果是基于微信小程序提供的image组件实现的，用到的属性如下：

src（图片资源地址）
binderror（允许横向滚动）
bindload （设置横向滚动条位置）

实现的效果

这个效果已被我封装成组件了，需要的朋友（新建文件夹名字自取，我的是img-load）,在创建对应的文件直接粘贴代码就行

index.wxml代码

<!-- 有图片地址时 -->
<view wx:if="{{url}}" class="before-pack" style="width:{{width}};height:{{height?height:0}};padding-top:{{height?0:width}};border-radius:{{radius}};box-shadow:{{shadow}};border:{{border}}; background-color: {{bgColor}}">
  <view wx:if="{{errorFlag}}" class="logoImg" style="width: {{logoSize}}; height: {{logoSize}};">
    <image class="icon" src="{{logoImg1}}" mode="aspectFit"></image>
  </view>
  <!-- 加载中 -->
  <view wx:if="{{!finishLoadFlag}}" class="{{!errorFlag?'errorFlagA':'errorFlagB'}}" style="width:{{width}};background-color:{{bgColor}};border-radius:{{radius}}">
    <view class="ui-loading" style="width:{{loadSize}};padding-top:{{loadSize}}" wx:if="{{!errorFlag}}"></view>
  </view>
  <!-- 加载成功 -->
  <view wx:else class="originImg" style="background-image:url({{url}});width:{{width}};height:{{height}};border-radius:{{radius}}" ></view>
  <!-- 是否加载成功 -->
  <image src="{{url}}" style="opacity: 0; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none;" bindload="finishLoad" binderror="errorLoad" />
</view>
<!-- 无图片地址时 -->
<view wx:else class="before-pack" style="width:{{width}};height:{{height?height:0}};padding-top:{{height?0:width}};border-radius:{{radius}};box-shadow:{{shadow}};border:{{border}}; background-color: {{bgColor}}">
  <view class="logoImg" style="width: {{logoSize}}; height: {{logoSize}};">
    <image class="icon" src="{{logoImg}}" mode="aspectFit"></image>
  </view>
</view>

index.wxss代码（这里的面有一张base64图片它是图片加载中的那个loading

.before-pack{position: relative; overflow: hidden;}
.errorFlagA{display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;}
.errorFlagB{display: flex; align-items: center; justify-content: center;}
.ui-faill {background-size: 100%;}
.ui-loading {height: 0; display: inline-block; vertical-align: middle; animation: a 1s steps(12) infinite; background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat; background-size: 100%;}
@keyframes a {0% {-webkit-transform: rotate(0deg); transform: rotate(0deg);} to {-webkit-transform: rotate(1turn); transform: rotate(1turn);}}
.originImg{position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background-size: 100% auto; background-repeat: no-repeat; background-position: center;}
.logoImg{position: absolute; top: 0; bottom: 0; left: 0;  right: 0; margin: auto;}
.logoImg .icon{width: 100%; height: 100%;}

index.json代码

{
  "component": true,
  "usingComponents": {}
}

index.js代码

/**
 * 图片预加载组件
 */
Component({
  properties: {
    url: String,
    radius: { type: String, value: "0%" },
    width: { type: String, value: "100%" },
    height: { type: String, value: "" },
    bgColor: { type: String, value: "#f8fafc" },
    logoImg: { type: String, value: "/assets/svg/baseMap.svg" },
    logoImg1: { type: String, value: "/assets/svg/baseMap1.svg" },
    logoSize: { type: String, value: "40%" },
    loadSize: { type: String, value: "24px" },
    shadow: { type: String, value: "" },
    border: { type: String, value: "" },
  },
  
  data: {
    finishLoadFlag: false,
    errorFlag: false,
  },
  
  attached(){
    // console.log(this.properties.url);
  },

  methods: {
    // 图片加载成功
    finishLoad(e) {this.setData({ finishLoadFlag: true, errorFlag: false });},
    // 图片加载失败
    errorLoad() {this.setData({ finishLoadFlag: false, errorFlag: true });}
  }
})

js用到的属性介绍:

url（网络图片地址）
radius （圆角设置）
width（图片宽度）
height（图片高度，高度不输入的情况下，和宽度比例为1:1）
bgColor（图片背景颜色）
logoImg（图片为空时显示的图片，格式svg）
logoImg1（图片加载失败时显示的图片，格式svg）
logoSize（logoImg&logoImg1图片显示大小）
loadSize（加载中loading图片大小）
shadow（图片阴影）
border（图片边框）

使用案列:
1、json中引用（img-load名字自取）

"usingComponents": {
	"img-load": "/components/img-load/index"
},

1、wxml中使用

<img-load width="100%" height="36vmin" url="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=240727947,2900548234&fm=26&gp=0.jpg" logoSize="40px"></img-load>

最后总结一下我实现它的大概逻辑，先通过wxml页面中的if判断出url是否为空，得到第一个效果（空图），然后在通过image组件中提供的两个方法（binderror&bindload）来判断图片是否显示成功，得到剩余两个效果（加载成功&加载失败），补充一点，图中的那个动画是用css动画属性去无限旋转加载loading来实现的。

补充：写的不好大佬勿喷，大佬勿喷，大佬勿喷，如果有好的建议或者方法请留言谢谢