微信小程序圖片預(yù)加載組件 wxapp-img-loader

andycall 發(fā)布于2019-08-23 12:24 / 3274人閱讀

摘要：由于微信小程序沒(méi)有提供類似這樣的對(duì)象，要實(shí)現(xiàn)圖片的預(yù)加載要麻煩一些，自定義組件可以在微信小程序中實(shí)現(xiàn)圖片預(yù)加載功能。圖片加載完成的回調(diào)方法的第一個(gè)參數(shù)為錯(cuò)誤信息加載成功則為，第二個(gè)參數(shù)為圖片信息類型，包括及。

由于微信小程序沒(méi)有提供類似 Image 這樣的 JS 對(duì)象，要實(shí)現(xiàn)圖片的預(yù)加載要麻煩一些， wxapp-img-loader自定義組件可以在微信小程序中實(shí)現(xiàn)圖片預(yù)加載功能。

使用

1、下載 wxapp-img-loader項(xiàng)目源代碼（https://github.com/o2team/wxa...），將 img-loader 目錄拷貝到你的項(xiàng)目中

2、在頁(yè)面的 WXML 文件中添加以下代碼，將組件模板引入

3、在頁(yè)面的 JS 文件中引入組件腳本

const ImgLoader = require("../../img-loader/img-loader.js")

4、實(shí)例化一個(gè) ImgLoader 對(duì)象，將 this(當(dāng)前 Page 對(duì)象) 傳入，第二個(gè)參數(shù)可選，為默認(rèn)的圖片加載完成的回調(diào)方法

this.imgLoader = new ImgLoader(this)

5、調(diào)用 ImgLoader 實(shí)例的 load 方法進(jìn)行圖片加載，第一個(gè)參數(shù)為圖片鏈接，第二個(gè)參數(shù)可選，為該張圖片加載完成時(shí)的回調(diào)方法。圖片加載完成的回調(diào)方法的第一個(gè)參數(shù)為錯(cuò)誤信息（加載成功則為 null），第二個(gè)參數(shù)為圖片信息（Object 類型，包括 src、width 及 height）。

this.imgLoader.load(imgUrlOriginal, (err, data) => {    console.log("圖片加載完成", err, data.src, data.width, data.height)
})

wxapp-img-loader組件可以加載單張圖片、也可以加載多張圖片。

運(yùn)行效果：

其他

wxapp-img-loader項(xiàng)目地址：https://github.com/o2team/wxa...

【小程序推薦】百科知識(shí)詞典

云服務(wù)器 GPU云服務(wù)器微信小程序組件微信小程序webrtc加載不出攝像頭圖片預(yù)加載 JS圖片預(yù)加載

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/98443.html

相關(guān)文章

微信小程序性能優(yōu)化入門(mén)指南

摘要：希望大家看完這篇文章能對(duì)小程序性能優(yōu)化有一定的認(rèn)識(shí)，如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤剑瑲g迎批評(píng)指正，如果喜歡，歡迎點(diǎn)贊收藏。小程序從發(fā)布到現(xiàn)在也已經(jīng)有將近兩年的時(shí)間，越來(lái)越來(lái)多的公司開(kāi)始重視小程序生態(tài)帶來(lái)的流量，今年也由于小程序平臺(tái)對(duì)外能力的越來(lái)越多的開(kāi)放以及小程序平臺(tái)的自身優(yōu)化，越來(lái)越多的開(kāi)發(fā)者也自主的投入到小程序的開(kāi)發(fā)當(dāng)中，現(xiàn)在，作為前端如果會(huì)寫(xiě)小程序，絕對(duì)是一個(gè)不折不扣的面試加分項(xiàng)。相...

whinc 2019-08-02 11:56 評(píng)論0 收藏0
微信小程序性能優(yōu)化入門(mén)指南

摘要：希望大家看完這篇文章能對(duì)小程序性能優(yōu)化有一定的認(rèn)識(shí)，如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤剑瑲g迎批評(píng)指正，如果喜歡，歡迎點(diǎn)贊收藏。小程序從發(fā)布到現(xiàn)在也已經(jīng)有將近兩年的時(shí)間，越來(lái)越來(lái)多的公司開(kāi)始重視小程序生態(tài)帶來(lái)的流量，今年也由于小程序平臺(tái)對(duì)外能力的越來(lái)越多的開(kāi)放以及小程序平臺(tái)的自身優(yōu)化，越來(lái)越多的開(kāi)發(fā)者也自主的投入到小程序的開(kāi)發(fā)當(dāng)中，現(xiàn)在，作為前端如果會(huì)寫(xiě)小程序，絕對(duì)是一個(gè)不折不扣的面試加分項(xiàng)。相...

heartFollower 2019-08-29 17:11 評(píng)論0 收藏0
微信小程序性能優(yōu)化入門(mén)指南

摘要：希望大家看完這篇文章能對(duì)小程序性能優(yōu)化有一定的認(rèn)識(shí)，如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤剑瑲g迎批評(píng)指正，如果喜歡，歡迎點(diǎn)贊收藏。小程序從發(fā)布到現(xiàn)在也已經(jīng)有將近兩年的時(shí)間，越來(lái)越來(lái)多的公司開(kāi)始重視小程序生態(tài)帶來(lái)的流量，今年也由于小程序平臺(tái)對(duì)外能力的越來(lái)越多的開(kāi)放以及小程序平臺(tái)的自身優(yōu)化，越來(lái)越多的開(kāi)發(fā)者也自主的投入到小程序的開(kāi)發(fā)當(dāng)中，現(xiàn)在，作為前端如果會(huì)寫(xiě)小程序，絕對(duì)是一個(gè)不折不扣的面試加分項(xiàng)。相...

wenzi 2019-08-23 12:45 評(píng)論0 收藏0
小程序開(kāi)發(fā)坑點(diǎn)總結(jié)

摘要：整個(gè)小程序所有分包大小不超過(guò)單個(gè)分包主包大小不能超過(guò)微信小程序主流框架對(duì)比應(yīng)該算是最早發(fā)布的小程序開(kāi)發(fā)框架，提供了類的語(yǔ)法風(fēng)格和特性，現(xiàn)階段應(yīng)該也是應(yīng)用最廣泛的框架吧。不過(guò)微信官方為了防止下載離線包的時(shí)間過(guò)程，也嚴(yán)格限制了小程序包的體積。那些年我們踩過(guò)的坑css樣式不能引用本地圖片資源，只能引用線上資源(background-image)，引用本地圖片資源只能用標(biāo)簽。{{}}不能執(zhí)行...

lowett 2019-08-30 15:44 評(píng)論0 收藏0
微信小程序資源匯總

awesome-github-wechat-weapp 是由OpenDigg整理并維護(hù)的微信小程序開(kāi)源項(xiàng)目庫(kù)集合。我們會(huì)定期同步上的項(xiàng)目到這里，也歡迎各位 UI組件開(kāi)發(fā)框架實(shí)用庫(kù)開(kāi)發(fā)工具服務(wù)端項(xiàng)目實(shí)例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)zanui-weapp ★794 - 好用易擴(kuò)展的小程序 UI 庫(kù)wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 評(píng)論0 收藏0