微信小程序开发——设置默认图片、错误加载图片

本文介绍微信小程序中如何处理图片加载失败的情况,通过在wxml中使用三元运算符结合binderror事件,实现图片加载错误时自动替换为默认图片。详细解释了代码逻辑和实现方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

wxml:

<image src='{{imgArr[index]==""?defaultImg:imgList[index]}}'  binderror="errorFunction" data-errorimg="{{index}}" />
说明:     
imgList: 图片数据源列表,需要在data中定义初始数据,或者从接口动态获取数据;
errorFunction: 图片加载错误绑定的事件,错误图片替换为默认图片主要在这里操作;
data-errorimg: 错误图片索引数据,需要在errorFunction中用以记录错误图片对应的位置;
如果图片地址为空,是不会触发binderror的,所以就直接对图片地址做判断,如果为空,则替换为默认图片。

js:

data: {
    imgArr:[],    //图片列表,接口动态获取
    defaultImg: "../../../assets/img/defaultImg.png",    //默认图片
},
......
省略图片数据源获取代码
......
/**
 * 图片加载错误触发的事件
 */
errorFunction(e) {
    if(e.type=="error"){
      var errorImgIndex = e.target.dataset.errorimg //获取错误图片循环的下标
      var imgList= this.data.imgArr                 //将图片列表数据绑定到变量
      imgList[errorImgIndex] = this.data.defaultImg //错误图片替换为默认图片
      this.setData({
        imgArr: imgList
      })
    }
}

备注:使用这种方法,是需要将图片数据源放在data中的,这样才可以在 binderror 的事件中进行数据的替换,不可以直接在wxml中调用接口的数据。

 

 

转自:逍遥云天 微信小程序开发——设置默认图片、错误加载图片

### 微信小程序图片加载实现方法 #### 方法概述 为了优化用户体验并减少初始加载时间,在微信小程序中实施图片加载是一种有效策略。当页面初次加载时,仅加载当前屏幕可见区域内的图片资源;随着用户的滚动操作,逐步加载进入可视范围的新图片。 #### 判断视口内可展示的数据量 通过计算容器的高度以及单个项目的高度来确定每次可以显示多少个项目。这一步骤对于初始化哪些项目应该立即被标记为`true`(表示已准备好加载),而其他未出现在视野中的项则保持默认状态(`false`)至关重要[^3]。 ```javascript // 计算每屏能够容纳的最大item数量 const query = wx.createSelectorQuery(); query.select('.container').boundingClientRect(function(rect){ const itemHeight = 100; // 假定每个item固定高度为100px let visibleCount = Math.floor((rect.height / itemHeight)); }).exec(); ``` #### 定义布尔型数组追踪加载状态 创建一个与实际数据列表长度相同的布尔值数组,用于记录各个位置上的图片是否已经被加载过了。最初只有那些位于顶部部分的元素会被设置成`true`,意味着它们应当马上获取对应的图像文件。 ```json [ true, true, false, ... ] ``` #### 滚动事件处理逻辑 每当发生滚动生成新的内容进入到视线范围内时,就需要更新上述提到的状态跟踪表,并触发相应位置处尚未下载过的媒体对象开始其网络请求过程。这里可以通过监听页面滚动距离变化来动态调整这个数组的内容。 ```javascript Page({ data: { imagesLoadedStatus: [], // 存储各张图像是不是已经完成预取 scrollTop: 0 // 当前滚动条顶端坐标 }, handleScroll(e) { this.setData({scrollTop:e.detail.scrollTop}); // 更新imagesLoadedStatus... } }) ``` #### 使用 Intersection Observer API 或自定义检测机制 考虑到并非所有浏览器都支持原生的IntersectionObserver特性,因此可以在微信环境中借助框架提供的工具或者自行编写简单的碰撞测试算法来进行相似的功能模拟——即监测特定DOM节点何时进入了观察者的视角之中。 #### 渐隐淡入效果增强视觉体验 除了基本的延迟加载外,还可以考虑加入过渡动画使得新增加出来的图形更加自然地融入到现有布局当中去。一种简单的方式就是给img标签附加CSS类样式,其中包含了从透明度0逐渐变为完全不透明的过程描述[^2]。 ```css .fade-in-image{ opacity: 0; transition:opacity .5s ease-out; } /* 加载完成后应用此class */ .loaded{ opacity: 1 !important; } ``` ```html <image class="fade-in-image {{loaded ? 'loaded' : ''}}" src="{{imageUrl}}"></image> ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值