該文章源于https://jdc.jd.com/archives/3820
將功能抽離成公用組件
實現(xiàn)這么一個功能享潜，在頁面上載入一張尺寸和 K 數(shù)都很大的圖片朋譬，由于圖片很大腿堤，下載需要一定的時間砂代，而在這段時間內(nèi)到忽，用戶看到的是空白或是不完整的圖片吴菠，體驗顯然不好者填。
一種常用的優(yōu)化手段是先加載一張縮略圖，該縮略圖通過樣式設(shè)置為和原圖一樣的寬高做葵，這樣用戶首先能很快速地看到一張模糊的圖片占哟，此時再去對原圖做預加載，加載完成之后對縮略圖進行替換酿矢，因為此時圖片已經(jīng)下載過了榨乎，所以界面上能無縫地切換為原圖顯示，效果如下：
https://storage.360buyimg.com/mtd/home/single-img-load1483686270312.gif
如何實現(xiàn)
新建 demo 頁面及組件相關(guān)的文件 img-loader.js 和 img-loader.wxml瘫筐，組件需要和頁面一樣有個模板文件蜜暑，是因為小程序里無法動態(tài)地插入模板結(jié)構(gòu)。然后在 demo.wxml 里通過 import 語句引用組件模板策肝，在 demo.js 里通過 require 語句將組件腳本進行引入
在頁面中通過 template 調(diào)用組件模板并傳入數(shù)據(jù)肛捍，這里我們傳遞一個名為 imgLoadList 的圖片數(shù)組過去
在頁面腳本中的 onLoad 方法中對組件進行初始化隐绵，并將 this 對象傳入，因為組件內(nèi)必須通過 Page 對象的 setData 來更新模板里的內(nèi)容
在組件的 img-loader.js 中定義一個 load 方法用來創(chuàng)建一個圖片的加載拙毫，將傳入的 src 添加到加載隊列中氢橙，并使用 setData 方法更新隊列數(shù)據(jù)
接下來在組件 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 頁面的代碼
如果把圖片加載完成的回調(diào)統(tǒng)一指定成 Page 對象中的方法滞欠，則可以很方便地處理多張圖片的加載，這里也寫了個例子肆良，效果如下：
https://storage.360buyimg.com/mtd/home/multi-img-load1483686388552.gif
總的來說調(diào)用起來還算方便吧筛璧，img-loader 的組件代碼略多這里就不貼出來啦，有興趣的同學可以前往 Github 項目頁面 查看惹恃，目前此組件已應(yīng)用在京東購物小程序版中夭谤。Have Fun~
轉(zhuǎn)載自：https://jdc.jd.com/archives/3820
