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

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

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

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

使用

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

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

3、在頁面的 JS 文件中引入組件腳本

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

4、實例化一個 ImgLoader 對象，將 this(當前 Page 對象) 傳入，第二個參數(shù)可選，為默認的圖片加載完成的回調方法

this.imgLoader = new ImgLoader(this)

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

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

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

運行效果：

其他

wxapp-img-loader項目地址：https://github.com/o2team/wxa...

【小程序推薦】百科知識詞典

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

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

轉載請注明本文地址：http://systransis.cn/yun/98443.html

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

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

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

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

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

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

wenzi 2019-08-23 12:45 評論0 收藏0
小程序開發(fā)坑點總結

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

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

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

Olivia 2019-08-21 17:48 評論0 收藏0