All Projects → o2team → Wxapp Img Loader

o2team / Wxapp Img Loader

适用于微信小程序的图片预加载组件

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Wxapp Img Loader

Wechat Weapp Grouputils
微信小程序群应用,包括群通知、群接龙、群投票、群通讯录4大功能
Stars: ✭ 222 (-78.84%)
Mutual labels:  wechat-app, wechat, wxapp
Python Weixin
微信(weixin|wechat) Python SDK 支持开放平台和公众平台 支持微信小程序云开发
Stars: ✭ 746 (-28.88%)
Mutual labels:  wechat-app, wechat, wxapp
Weapp
🐧 微信小程序组件和功能封装,基于微信Component自定义组件开发
Stars: ✭ 235 (-77.6%)
Mutual labels:  wechat-app, wechat, wxapp
Weixin Java Miniapp Demo
基于Spring Boot 和 WxJava 实现的微信小程序Java后端Demo
Stars: ✭ 779 (-25.74%)
Mutual labels:  wechat-app, wechat, wxapp
Wx Charts
微信小程序图表charts组件,Charts for WeChat Mini Program
Stars: ✭ 4,633 (+341.66%)
Mutual labels:  wechat-app, wechat
Wechat Weapp Mapdemo
微信小程序开发mapdemo,地图导航、marker标注
Stars: ✭ 491 (-53.19%)
Mutual labels:  wechat, wxapp
Wxapp
这是一个Sublime的插件, 用来开发<微信小程序>.
Stars: ✭ 42 (-96%)
Mutual labels:  wechat, wxapp
Wechat Miniprogram Examples
WeChat mini program examples. 微信小程序示例
Stars: ✭ 634 (-39.56%)
Mutual labels:  wechat-app, wechat
Qiniu Wxapp Sdk
qiniu SDK based on wxapp
Stars: ✭ 638 (-39.18%)
Mutual labels:  wechat, wxapp
Mpvue Animated Number
微信小程序 mpvue 数字更新滚动动画组件 / An animated number component for mpvue
Stars: ✭ 33 (-96.85%)
Mutual labels:  wechat-app, wechat
Masterwechatapp
『微信小程序』优秀教程、轮子、开源项目 资源汇总
Stars: ✭ 826 (-21.26%)
Mutual labels:  wechat-app, wechat
Tom Vpr
how does voiceprint recognition work in wechat page
Stars: ✭ 37 (-96.47%)
Mutual labels:  wechat-app, wechat
Planmaster
套餐助手:手机套餐对比选购小程序
Stars: ✭ 487 (-53.57%)
Mutual labels:  wechat-app, wechat
Scuplus Wechat
We川大小程序[scuplus] 使用wepy开发的完善的校园综合小程序, 40+页面,前后端开源,包括成绩、课表、失物招领、图书馆、新闻资讯等等常见校园场景功能
Stars: ✭ 545 (-48.05%)
Mutual labels:  wechat-app, wechat
Wxappunpacker
wxml被“编译“后”压缩“一下多好!😀
Stars: ✭ 4,487 (+327.74%)
Mutual labels:  wechat, wxapp
Wechat Weapp 2048
微信小程序-2048小游戏
Stars: ✭ 406 (-61.3%)
Mutual labels:  wechat-app, wechat
Miniapp
微信小程序服务端 SDK (for Golang)
Stars: ✭ 815 (-22.31%)
Mutual labels:  wechat, wxapp
Alaweb
一套 Vue 代码,多端可用(H5、小程序、苹果App、安卓App、头条等)。系统含150+页面,200+组件(5端通用),30+元件(每个终端独立完成)
Stars: ✭ 837 (-20.21%)
Mutual labels:  wechat-app, wxapp
Wechat App Music
微信小程序:音乐播放器 技术栈: redux + es7 +labrador
Stars: ✭ 384 (-63.39%)
Mutual labels:  wechat-app, wechat
Okam
Mini program development framework
Stars: ✭ 399 (-61.96%)
Mutual labels:  wechat, wxapp

wxapp-img-loader

这是一个适用于微信小程序的原生图片预加载组件(若你使用的是 Taro,请移步至 taro 分支),已应用于京东购物等多个小程序中。使用步骤如下:

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)。

使用方法可参考 demo 目录的事例,包括加载单张图片、及加载多张图片的场景,运行效果如下图所示:

单张图片预加载 多张图片预加载

- eof -

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].