微信小程式的圖片預先載入組件
適用於微信小程式的圖片預先載入元件,已應用於京東購物小程式版。使用步驟如下:
1.將 img-loader 目錄拷貝到你的專案中
2.在頁面的 WXML 檔案中加入以下程式碼,將元件模板引入
<import src="../../img-loader/img-loader.wxml"/>
<template is="img-loader" data="{{ imgLoadList }}"></template>
3.在頁面的 JS 檔案中引入元件腳本
const ImgLoader = require('../../img-loader/img-loader.js')
4.實例化一個 ImgLoader 對象,將 this(當前 Page 對象) 傳入,第二個參數可選,為預設的圖片載入完成的回調方法
this.imgLoader = new ImgLoader(this)
5.調用 ImgLoader 實例的 load 方法進行圖片加載,第一個參數為圖片鏈接,第二個參數可選,為該張圖片加載完成時的回調方法
this.imgLoader.load(imgUrlOriginal, (err, data) => {
console.log('圖片載入完成', err, data.src, data.width, data.height)
})
註:圖片載入完成的回呼方法的第一個參數為錯誤訊息(載入成功則為 null),第二個參數為圖片訊息(Object 類型,包括 src、width 和 height)。
1.將 img-loader 目錄拷貝到你的專案中
2.在頁面的 WXML 檔案中加入以下程式碼,將元件模板引入
<import src="../../img-loader/img-loader.wxml"/>
<template is="img-loader" data="{{ imgLoadList }}"></template>
3.在頁面的 JS 檔案中引入元件腳本
const ImgLoader = require('../../img-loader/img-loader.js')
4.實例化一個 ImgLoader 對象,將 this(當前 Page 對象) 傳入,第二個參數可選,為預設的圖片載入完成的回調方法
this.imgLoader = new ImgLoader(this)
5.調用 ImgLoader 實例的 load 方法進行圖片加載,第一個參數為圖片鏈接,第二個參數可選,為該張圖片加載完成時的回調方法
this.imgLoader.load(imgUrlOriginal, (err, data) => {
console.log('圖片載入完成', err, data.src, data.width, data.height)
})
註:圖片載入完成的回呼方法的第一個參數為錯誤訊息(載入成功則為 null),第二個參數為圖片訊息(Object 類型,包括 src、width 和 height)。
免責聲明
本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn
相關文章
![什麼是來源映射以及為什麼 JavaScript 開發人員需要它們?](https://img.php.cn/upload/article/001/246/273/172968495189001.jpg)
23 Oct 2024
來源映射(.map 檔案)彌合了縮小程式碼和原始程式碼之間的差距,使開發人員能夠調試神秘的縮小程式碼。它們提供從縮小程式碼到原始程式碼的映射,允許在生產環境中進行有效的故障排除
![如何從 .NET EXE 檔案中恢復遺失的 C# 原始碼?](https://img.php.cn/upload/article/001/246/273/173706397049384.jpg)
17 Jan 2025
從 .NET EXE 產生 C# 原始程式碼當 C# 應用程式的原始程式碼遺失時,從 EXE 檔案產生程式碼可能至關重要...
![Python 的內部運作原理](https://img.php.cn/upload/article/001/246/273/173069910356574.png)
04 Nov 2024
這是完整的程式碼檔案:程式碼 1. 原始碼 當您編寫 Python 腳本時,它是人類可讀的文字。該原始碼是一切的起點。 您的 Python 原始碼以 .py 檔案編寫,是人類可讀的。這段程式碼
![如何存取 C 原始程式碼中的 CMake 變數?](https://img.php.cn/upload/article/001/246/273/173053578325593.jpg)
02 Nov 2024
在 C 原始程式碼中存取 CMake 變數問題:如何在 C 原始程式碼中存取和使用 CMake 變量,例如 LIBINTERFACE_VERSION...
![See all articles](/static/imghw/down_right.png)
![](/static/imghw/taglogo.png)
Hot Tools
![微信小程式demo:仿商城](https://img.php.cn/upload/webcode/000/000/000/587dbb2750c82657.png)
微信小程式demo:仿商城
微信小程式demo:仿商城,上手簡單,對商城的一些基本的功能有很好的涉及
![外帶:實現類似錨點功能](https://img.php.cn/upload/webcode/000/000/000/587db82bf0392490.png)
外帶:實現類似錨點功能
正是大家需要的類似錨點功能,另外也實現了一些外帶app的典型點菜功能,推薦學習研究;
![微信小程式demo:樂助](https://img.php.cn/upload/webcode/000/000/000/587db8c2f3a51421.png)
微信小程式demo:樂助
微信小程式demo:樂助:類似基於地理位置的到位;助人應用,與張小龍的小程式精神有點相似。
![微信小程式遊戲類demo挑選不同色塊](https://img.php.cn/upload/webcode/000/000/000/587db4b7c7309646.png)
微信小程式遊戲類demo挑選不同色塊
微信小程式遊戲類demo挑選不同色塊
![微信小程式demo:輪播圖變換](https://img.php.cn/upload/webcode/000/000/000/587db87c32a47793.png)
微信小程式demo:輪播圖變換
輪播圖樣式變換,簡單的一個用小程式實現的輪播圖,寫法容易
![](/static/imghw/taglogo.png)
熱門文章
Tales Of Graces F 重製版:所有鎖定的寶箱密碼
18 Jan 2025
手游攻略
崩壞:星穹鐵道 - 所有金色替罪羊謎題解決方案
18 Jan 2025
手游攻略
如何修復 KB5049622 在 Windows 11 中安裝失敗的問題?
15 Jan 2025
故障排查
如何修復 KB5050021 在 Windows 11 中安裝失敗的問題?
15 Jan 2025
故障排查
如何修復 KB5050009 在 Windows 11 中安裝失敗的問題?
15 Jan 2025
故障排查