網(wǎng)頁中的圖片預(yù)加載

圖片預(yù)加載對圖片畫廊及圖片占據(jù)很大比例的網(wǎng)站來說十分有利，它保證了圖片快速、無縫地發(fā)布，也可幫助用戶在瀏覽你網(wǎng)站內(nèi)容時獲得更好的用戶體驗。我們知道在 Web 頁面中實現(xiàn)圖片的預(yù)加載其實很簡單，通常的做法是在 JS 中使用 Image 對象即可，代碼大致如下

var image = new Image()
image.onload = function() {
 console.log('圖片加載完成')
}
image.src = 'http://misc.360buyimg.com/lib/img/e/logo-201305.png'

下面推薦幾篇網(wǎng)頁中實現(xiàn)圖片預(yù)加載的文章：

     1、jquery 圖片預(yù)加載 自動等比例縮放插件

     2、JS實現(xiàn)圖片預(yù)加載無需等待

     3、jQuery簡單實現(xiàn)圖片預(yù)加載

然而在微信小程序（以下簡稱小程序）里要實現(xiàn)圖片的預(yù)加載要更麻煩一些，因為小程序里并沒有提供類似 Image 這樣的 JS 對象。。

小程序必知必會

在進入正題前，需要了解以下小程序相關(guān)的知識（當(dāng)然最好還是完整的學(xué)習(xí)一下官方文檔）：

1. 小程序框架的核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，整個系統(tǒng)分為視圖層和邏輯層兩塊，視圖層即頁面模板（后綴為 .wxml 的文件），邏輯層即頁面 JS 文件
2. 小程序的頁面模板由一系列的基礎(chǔ)組件組合而成，如 view、text、button 等
3. 頁面內(nèi)容的更新基于數(shù)據(jù)的單向綁定來進行，通過 JS 調(diào)用 Page 對象的 setData 方法來更新模板中綁定的數(shù)據(jù)
4. 視圖層到邏輯層的通信是通過事件完成的，在組件中聲明事件的回調(diào)，JS 端可監(jiān)聽到界面交互的發(fā)生、組件狀態(tài)的變化等
5. 在 WXML 文件中，可通過 template 進行模板的復(fù)用，若 template 是在不同文件里定義的，需要先通過 import 語句進行引入

這里有個官方的簡單例子可以用來幫助理解

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

//腳本文件 foo.js
Page({
 data: {
 name: 'WeChat'
 },
 changeName: function(e) {
 this.setData({
 name: 'MINA'
 })
 }
})

運行這個頁面會看到一行 Hello WeChat! 的文字及一個按鈕，點擊按鈕后文字會變成 Hello MINA!

在小程序中加載圖片

小程序提供一個 image 組件（類似于 HTML 中的 img 標(biāo)簽），可以設(shè)置 src 及加載成功或失敗的回調(diào)，使用起來很簡單

<!-- 模板文件 bar.wxml -->
<image src="http://misc.360buyimg.com/lib/img/e/logo-201305.png" bindload="imageOnLoad" binderror="imageOnLoadError" />

//腳本文件 bar.js
Page({
 imageOnLoad(ev) {
 console.log(`圖片加載成功，width: ${ev.detail.width}; height: ${ev.detail.height}`)
 },
 imageOnLoadError() {
 console.log('圖片加載失敗')
 }
})

運行以上代碼，順利的話頁面上會顯示出一張圖片，同時控制臺會打印出帶圖片寬高的日志信息

將功能抽離成公用組件

接下來我們考慮實現(xiàn)這么一個功能，在頁面上載入一張尺寸和 K 數(shù)都很大的圖片，由于圖片很大，下載需要一定的時間，而在這段時間內(nèi)，用戶看到的是空白或是不完整的圖片，體驗顯然不好。

一種常用的優(yōu)化手段是先加載一張縮略圖，該縮略圖通過樣式設(shè)置為和原圖一樣的寬高，這樣用戶首先能很快速地看到一張模糊的圖片，此時再去對原圖做預(yù)加載，加載完成之后對縮略圖進行替換，因為此時圖片已經(jīng)下載過了，所以界面上能無縫地切換為原圖顯示，效果如下：

單張圖片預(yù)加載

完成這個優(yōu)化操作的關(guān)鍵就在于需要一個公共的圖片預(yù)加載組件的支持，接下來我們分步驟來看看如何實現(xiàn)

1. 新建 demo 頁面及組件相關(guān)的文件 img-loader.js 和 img-loader.wxml，組件需要和頁面一樣有個模板文件，是因為小程序里無法動態(tài)地插入模板結(jié)構(gòu)。然后在 demo.wxml 里通過 import 語句引用組件模板，在 demo.js 里通過 require 語句將組件腳本進行引入
2. 在頁面中通過 template 調(diào)用組件模板并傳入數(shù)據(jù)，這里我們傳遞一個名為 imgLoadList 的圖片數(shù)組過去
3. 在頁面腳本中的 onLoad 方法中對組件進行初始化，并將 this 對象傳入，因為組件內(nèi)必須通過 Page 對象的 setData 來更新模板里的內(nèi)容
4. 在組件的 img-loader.js 中定義一個 load 方法用來創(chuàng)建一個圖片的加載，將傳入的 src 添加到加載隊列中，并使用 setData 方法更新隊列數(shù)據(jù)
5. 接下來在組件 img-loader.wxml 中通過接收到的圖片隊列數(shù)據(jù)，用 wx:for 指令去生成 image 組件來對圖片進行加載，同時將成功及失敗的回調(diào)綁定到 img-loader.js 中的方法中，最終再回調(diào)回 Page 對象中
   

可以看出，由于小程序里無法動態(tài)地插入模板結(jié)構(gòu)，所以相對于普通網(wǎng)頁端的組件調(diào)用，這里多出了在 WXML 文件中引入及使用模板這個步驟，而其他部分對于調(diào)用方（即Demo 頁面）來說則是相似的，下面是完整的 Demo 頁面的代碼

<!-- demo.wxml -->
<view class="img_wrap">
 <image wx:if="{{ imgUrl }}" src="{{ imgUrl }}" />
</view>
<button bindtap="loadImage">Click To Load Image</button>
<view class="msg">{{ msg }}</view>
<!-- 引入圖片預(yù)加載組件 -->
<import src="../../img-loader/img-loader.wxml"/>
<template is="img-loader" data="{{ imgLoadList }}"></template>

// ------ demo.js ------
//引入圖片預(yù)加載組件
const ImgLoader = require('../../img-loader/img-loader.js')
//縮略圖 80x50 3KB
const imgUrlThumbnail = 'http://storage.360buyimg.com/mtd/home/lion1483683731203.jpg'
//原圖 3200x2000 1.6MB
const imgUrlOriginal = 'http://storage.360buyimg.com/mtd/home/lion1483624894660.jpg'
Page({
 data: {
 msg: '',
 imgUrl: ''
 },
 onLoad() {
 //初始化圖片預(yù)加載組件
 this.imgLoader = new ImgLoader(this)
 },
 loadImage() {
 //加載縮略圖
 this.setData({
 msg: '大圖正拼命加載..',
 imgUrl: imgUrlThumbnail
 })
 //同時對原圖進行預(yù)加載，加載成功后再替換
 this.imgLoader.load(imgUrlOriginal, (err, data) => {
 console.log('圖片加載完成', err, data.src)
 this.setData({ msg: '大圖加載完成~' })
 if (!err)
 this.setData({ imgUrl: data.src })
 })
 }
})

如果把圖片加載完成的回調(diào)統(tǒng)一指定成 Page 對象中的方法，則可以很方便地處理多張圖片的加載，這里也寫了個例子，效果如下：

多張圖片預(yù)加載

總的來說調(diào)用起來還算方便吧，img-loader 的組件代碼略多這里就不貼出來啦，有興趣的同學(xué)可以前往 Github 項目頁面 查看，目前此組件已應(yīng)用在京東購物小程序版中。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

最新評論