微信小程序预加载图片以及占位图片
Posted 浪子义
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序预加载图片以及占位图片相关的知识，希望对你有一定的参考价值。
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 () { } })
setData是为了实例化数据目的为了能够放在页面将ite模拟数据赋值给定义的ite（名字随便定义）既然是数据就会有data，bind的目的是为了捆绑，后面的数字是时间间隔多少秒显示要加载出来的数据
本人原创博客希望大家提出意见:
以上是关于微信小程序预加载图片以及占位图片的主要内容，如果未能解决你的问题，请参考以下文章