微信小程式中圖片預先載入元件 wxapp-img-loader的使用介紹

這篇文章帶給大家的內容是關於微信小程式中圖片預先載入元件wxapp-img-loader的使用介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

由於微信小程式沒有提供類似Image 這樣的JS 對象，要實現圖片的預加載要麻煩一些， wxapp-img-loader自訂元件可以在微信小程式中實現圖片預加載功能。

使用

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

2、在頁面的WXML 檔案中加入以下程式碼，將元件範本引入

<import></import>
<template></template>

3、在頁面的JS 檔案中引入元件腳本

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

4、實例化一個ImgLoader 對象，將this(當前Page 物件) 傳入，第二個參數可選，為預設的圖片載入完成的回呼方法

this.imgLoader = new ImgLoader(this)

5、呼叫ImgLoader實例的load 方法進行圖片加載，第一個參數為圖片鏈接，第二個參數可選，為該張圖片加載完成時的回調方法。圖片載入完成的回呼方法的第一個參數為錯誤訊息（載入成功則為 null），第二個參數為圖片資訊（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...#########

以上是微信小程式中圖片預先載入元件 wxapp-img-loader的使用介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！