网页中的图片预加载

我们知道在 Web 页面中实现图片的预加载其实很简单，通常的做法是在 JS 中使用 Image 对象即可，代码大致如下

1
2
3
4
5
 
var image = new Image()
image.onload = function() {
        
  console.log('图片加载完成')
}
image.src = 'http://misc.360buyimg.com/lib/img/e/logo-201305.png'

然而在微信小程序（以下简称小程序）里要实现图片的预加载要更麻烦一些，因为小程序里并没有提供类似 Image 这样的 JS 对象。。

小程序必知必会

在进入正题前，需要了解以下小程序相关的知识（当然最好还是完整的学习一下官方文档）：

  1. 小程序框架的核心是一个响应的数据绑定系统，整个系统分为视图层和逻辑层两块，视图层即页面模板（后缀为 .wxml 的文件），逻辑层即页面 JS 文件
  2. 小程序的页面模板由一系列的基础组件组合而成，如 view、text、button 等
  3. 页面内容的更新基于数据的单向绑定来进行，通过 JS 调用 Page 对象的 setData 方法来更新模板中绑定的数据
  4. 视图层到逻辑层的通信是通过事件完成的，在组件中声明事件的回调，JS 端可监听到界面交互的发生、组件状态的变化等
  5. 在 WXML 文件中，可通过 template 进行模板的复用，若 template 是在不同文件里定义的，需要先通过 import 语句进行引入

这里有个官方的简单例子可以用来帮助理解

1
2
3
 
<!-- 模板文件 foo.wxml -->
<view> Hello {
        {name}}! </view>
<button bindtap="changeName"> Click me! </button>
 
1