小程序-登录验证码的加载方式

在登录 输入手机号，发送验证码，image 元素设置 src 链接传参带上时 time 间戳，保证每次点击验证码的框，都实时加载验证码。

// src = 'http://*******?time=123124334534' 
<view>
　　<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
</view>

如果遇到网络错误，加载不出来图片，可能是一个空白区域。

可以在图片加载的时候，做一个图片监听事件：

一个是 监听错误的事件 binderror；

一个是 监听加载的事件 bindload；

然后 给父级设置一个class类，在网络错误时，显示这个class类的伪类 :after{}，反之成功加载不显示这个class类。

 

// src = 'http://*******?time=123124334534' 
<view class="isShow ? 'imgTxt' : '' ">
　　<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}" bindload="bindload" binderror="binderror"></image>
</view>

bindload (){}
binderror (){}
'
.imgTxt image:after{
　　content: '加载中'
　　position: absolute;
　　bacckground: #aaa;
}