网页中的图片预加载
我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image
对象即可,代码大致如下
1 |
var image = new Image() |
然而在微信小程序(以下简称小程序)里要实现图片的预加载要更麻烦一些,因为小程序里并没有提供类似 Image
这样的 JS 对象。。
小程序必知必会
在进入正题前,需要了解以下小程序相关的知识(当然最好还是完整的学习一下官方文档):
- 小程序框架的核心是一个响应的数据绑定系统,整个系统分为视图层和逻辑层两块,视图层即页面模板(后缀为 .wxml 的文件),逻辑层即页面 JS 文件
- 小程序的页面模板由一系列的基础组件组合而成,如
view
、text
、button
等 - 页面内容的更新基于数据的单向绑定来进行,通过 JS 调用 Page 对象的
setData
方法来更新模板中绑定的数据 - 视图层到逻辑层的通信是通过事件完成的,在组件中声明事件的回调,JS 端可监听到界面交互的发生、组件状态的变化等
- 在 WXML 文件中,可通过
template
进行模板的复用,若template
是在不同文件里定义的,需要先通过import
语句进行引入
这里有个官方的简单例子可以用来帮助理解
1 |
<!-- 模板文件 foo.wxml --> |
1 |