微信小程序 image bindload 事件不触发,图片加载不出来

本文讲述了在微信小程序中,图片页面频繁跳转或后台运行时,bindload事件不触发导致图片加载不出来的问题。解决方法是在图片URL后添加随机数,让小程序认为每次请求的是新图片,从而从缓存中重定向到网络加载。虽然影响性能和流量,但能确保图片正常加载。

问题:

当小程序图片页面反复跳转时,或者微信打开小程序页面之后,处于后台运行。

图片加载不出来,我图片加载是通过bindload事件不判断是否下载完成再显示。但是现在bindload不触发,一直显示加载层。

分析:

其原因就在于,小程序的优化机制,多次加载同一张图片,往往会从缓存中读取,而不是从网络下载,这就导致 bindload 事件不会触发了。

 

解决:

 前端加载图片url的时候,在后面加一串随机数,这样小程序每次都会认为是新图片,不会从缓存中读取了。这个方法简单,就是会浪费一些性能和流量。

.wxml 

 <view class="item-left">
    <image src="/images/mall/loading.gif" class="loading-img" hidden="{{imgShow}}"></image>
    <image fade-in mode="aspectFill" show-menu-by-longpress src="{{imgsrc}}" class="product-img br16"
           hidden="{{!imgShow}}" lazy-load data-imgsrc="{{imgsrc}}"
           data-index="{{itemIndex}}" bindload="handlePictureLoadEvent"></image>
  </view>

.js 

 imgsrc =`${imgsrc}?t=${Math.random()}`//防止触发图片load事件失败
       

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值