微信小程序预加载图片以及占位图片 -云博客

微信小程序预加载图片以及占位图片

# 微信 2024-05-05 14:17 0 703 来源：云博客

wxml页面

利用三目运算：代码如下：

1 <image src="{{ima?ima:‘../../images/4.jpg‘}}" />

（../../images/4.jpg）这里意思是预加载图片大概是一张黑白色的类似于

技术分享图片

js代码如下：

 Page({ 
 /** 
  * 页面的初始数据 
  */ 
 data: { 
 ima: "", 
 }, 
 /** 
  * 生命周期函数--监听页面加载 
  */ 
internet:function(){
  setTimeout(function(){
    this.setData({  
/*setData*/是为了模拟服务器传输的数据     
ima:‘http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg‘,     
})  
 }.bind(this),2000);
},
 onLoad:
 function (options) { 
 this.
 internet（） 
 /*调用*/ 
   
 }, 
 
 // app.YoniClient.request(app.Func.LOGIN,) 
 
 /** 
  * 生命周期函数--监听页面初次渲染完成 
  */ 
 onReady:
 function () { 
 
 }, 
 /** 
  * 生命周期函数--监听页面显示 
  */ 
 onShow:
 function () { 
 
 }, 
 
 /** 
  * 生命周期函数--监听页面隐藏 
  */ 
 onHide:
 function () { 
 
 }, 
 
 /** 
  * 生命周期函数--监听页面卸载 
  */ 
 onUnload:
 function () { 
 
 }, 
 
 /** 
  * 页面相关事件处理函数--监听用户下拉动作 
  */ 
 onPullDownRefresh:
 function () { 
 
 }, 
 
 /** 
  * 页面上拉触底事件的处理函数 
  */ 
 onReachBottom:
 function () { 
 
 }, 
 
 /** 
  * 用户点击右上角分享 
  */ 
 onShareAppMessage:
 function () { 
 
 } 
 }) 

那么如果是以数组形式的话也非常简单：

wxml代码

<image src=‘{{item.images?item.images:"../../../images/sketch_169_102.jpg"}}‘ class=‘news_list_img‘ mode=‘widthFix‘></image>

因为数组的话要用到参数item可能其他

js代码如下：

Page({ /** * 页面的初始数据 */ data: { items: [{ title: "第一届少儿足球比赛", txt: "第一届郑州足球比赛开幕式z乒启动计划", time: "2017年11月20日", images: ‘‘, }, { title: "第一届少儿足球比赛", txt: "第一届郑州足球比赛开幕式z乒启动计划", time: "2017年11月22日", images: ‘‘, }], ite: [{ title: "第一届少儿足球比赛", txt: "第一届郑州足球比赛开幕式z乒启动计划", time: "2017年11月20日", images: "http://img2.niutuku.com/desk/1208/1401/ntk-1401-8806.jpg", }, { title: "第一届少儿足球比赛", txt: "第一届郑州足球比赛开幕式z乒启动计划", time: "2017年11月22日", images: "http://img2.niutuku.com/desk/1208/1401/ntk-1401-8806.jpg", }] },/** * 生命周期函数--监听页面加载 */ internet: function () { let ite = this.data.ite; setTimeout(function () { this.setData({ items: ite, }) }.bind(this), 2000); }, onLoad: function (options) {
this.internet()
 }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }})