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

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的目的是为了捆绑,后面的数字是时间间隔多少秒显示要加载出来的数据

时间: 2024-10-07 13:27:45

微信小程序预加载图片以及占位图片的相关文章

微信小程序之加载更多(分页加载)实例

业务需求: 列表滚动到底部时,继续往上拉,加载更多内容 必备参数: (1)pageindex: 1 //第几次加载 (2)callbackcount: 15 //需要返回数据的个数 其他参数: 根据接口的所需参数 实现原理: 当第一次访问接口时,传递2个必备参数(第1次加载,需要返回数据的个数为15个),和其他参数(需要搜索的字符串)给后台,后台返回第一次数据过来.在请求成功的的回调函数中,判断返回的数据是否>0,是,则取出数据,渲染视图层,并把"上拉加载"显示在列表底部:否,则

微信小程序分包加载

分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载. 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中每个分包小程序必定含有一个主包,所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本,而分包则是根据开发者的配置进行划分. 在小程序启动时,默认会下载主包并启动主包内页面,如果用户需要打开分包内某个页面,客户端会把对应分包下载下来,下载完成后再进行展示. 目前小程序分包大小有以下限制

微信小程序之----加载中提示框loading

loading loading只有一个属性hidden .wxml <view> <loading hidden="{{hidden}}"> 加载中... </loading> <button bindtap="changeHidden">show/hidden</button> </view> .js Page({ data:{ hidden:true }, changeHidden: fun

微信小程序 动态加载class

<view class=' {{topid==1?"top": "untop"}}' > 原文地址:https://www.cnblogs.com/zsczsc/p/10177441.html

微信小程序分包加载代码实现方式

直接在 “app.json” 中贴入代码 { "pages": [ "pages/Login/xxxx", ], "subpackages":[{ // 这里就是贴入的代码 root值可以任意改 pages同上 "root":"packageA", "pages":[ "pages/Login/bbb", "pages/Login/ccc", ]

「小程序JAVA实战」 小程序默认加载的页面和生命周期(八)

转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-08/ 小程序如何加载的呢?生命周期!源码:https://github.com/limingios/wxProgram.git 中的No.3 加载页面 小程序默认加载的pages中的第一个目录 不管你的名称,只管你的顺序 其他目录需要通过触发才能加载 生命周期 相关的框架的时候都有生命周期的概念,通过了解生命周期更好的把控框架的使用! onLaunch 第一次打开小程序的初始化,也被调用一次.

微信小游戏资源加载页与云存储

------------恢复内容开始------------ 微信小游戏为什么要有开始资源加载页? 当小游戏包过大的时候,我们如何优化包的大小,最直接的先把图片或者声音等资源放到云端,等小游戏初始化后再从云端下载到本地,而小游戏包里只放代码和几张简单的加载图. 为什么微信加载资源的页面和初始化的页面是两个页面? 微信小游戏自带初始化页面是,微信从云端下载小游戏代码到本地(这个是自带的,不需要处理,更没有必要再自定义).资源加载页是,当小游戏初始化完成后再下载资源图片和其他媒体素材,如果没有下载进

小程序的加载机制和运行机制

一.运行机制 冷启动指的是重新启动,热启动指的是5分钟内从后台切换到前台,只有冷启动才能加载最新的包. 小程序什么时候会关闭? 5min后台运行,连续收到两次(2s)系统告警. 二.加载机制 三.小程序的应用生命周期 四.小程序页面的生命周期 原文地址:https://www.cnblogs.com/xietianjiao/p/11937530.html

微信小程序隐藏客服按钮,用图片替代&amp;增加提示卡片可随时关闭。

如图,本次案例要做的是右下角的客服按钮和蓝色渐变的提示卡片,可随时关闭的. 微信官方给了客服按钮标签 <contact-button type="default-dark" size="100"></contact-button> 这个标签的样式不可修改,如果我们要换自己想改的图片,需要怎么做呢?就像我图片上的样式.我这个客服控件是放在一个正圆的view里的居中位置,所以,我这里先通过position定位到居中位置,把size放到最大. 然后