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

我們知道在 Web 頁面中實(shí)現(xiàn)圖片的預(yù)加載其實(shí)很簡(jiǎn)單，通常的做法是在 JS 中使用 Image 對(duì)象即可，代碼大致如下

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

然而在微信小程序（以下簡(jiǎn)稱小程序）里要實(shí)現(xiàn)圖片的預(yù)加載要更麻煩一些，因?yàn)樾〕绦蚶锊]有提供類似 Image 這樣的 JS 對(duì)象。。

小程序必知必會(huì)

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

小程序框架的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，整個(gè)系統(tǒng)分為視圖層和邏輯層兩塊，視圖層即頁面模板（后綴為 .wxml 的文件），邏輯層即頁面 JS 文件

小程序的頁面模板由一系列的基礎(chǔ)組件組合而成，如 view、text、button 等

頁面內(nèi)容的更新基于數(shù)據(jù)的單向綁定來進(jìn)行，通過 JS 調(diào)用 Page 對(duì)象的 setData 方法來更新模板中綁定的數(shù)據(jù)

視圖層到邏輯層的通信是通過事件完成的，在組件中聲明事件的回調(diào)，JS 端可監(jiān)聽到界面交互的發(fā)生、組件狀態(tài)的變化等

在 WXML 文件中，可通過 template 進(jìn)行模板的復(fù)用，若 template 是在不同文件里定義的，需要先通過 import 語句進(jìn)行引入

這里有個(gè)官方的簡(jiǎn)單例子可以用來幫助理解

<!-- 模板文件 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'})} })

運(yùn)行這個(gè)頁面會(huì)看到一行 Hello WeChat! 的文字及一個(gè)按鈕，點(diǎn)擊按鈕后文字會(huì)變成 Hello MINA!

在小程序中加載圖片

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

<!-- 模板文件 bar.wxml --> <image src="//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('圖片加載失敗')} })

運(yùn)行以上代碼，順利的話頁面上會(huì)顯示出一張圖片，同時(shí)控制臺(tái)會(huì)打印出帶圖片寬高的日志信息

將功能抽離成公用組件

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

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

我們團(tuán)隊(duì)承接前端開發(fā)、小程序開發(fā)，歡迎外包合作。如有需要，敬請(qǐng)咨詢！微信/QQ：865500888

運(yùn)行以上代碼，順利的話頁面上會(huì)顯示出一張圖片，同時(shí)控制臺(tái)會(huì)打印出帶圖片寬高的日志信息

將功能抽離成公用組件

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

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

可以看出，由于小程序里無法動(dòng)態(tài)地插入模板結(jié)構(gòu)，所以相對(duì)于普通網(wǎng)頁端的組件調(diào)用，這里多出了在 WXML 文件中引入及使用模板這個(gè)步驟，而其他部分對(duì)于調(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})//同時(shí)對(duì)原圖進(jìn)行預(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 對(duì)象中的方法，則可以很方便地處理多張圖片的加載，這里也寫了個(gè)例子，效果如下：

我們團(tuán)隊(duì)承接前端開發(fā)、小程序開發(fā)，歡迎外包合作。如有需要，敬請(qǐng)咨詢！微信/QQ：865500888

總的來說調(diào)用起來還算方便吧，img-loader 的組件代碼略多這里就不貼出來啦，Have Fun~

總結(jié)

以上是生活随笔為你收集整理的页面加载成功后调用_在微信小程序里实现图片预加载组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。