• Stars
    star
    1,104
  • Rank 42,038 (Top 0.9 %)
  • Language
    JavaScript
  • Created almost 8 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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 -

More Repositories

1

wxapp-market

小程序营销组件,Marketing components for WeChatApp
JavaScript
2,667
star
2

athena

O2前端流程工具
JavaScript
979
star
3

H5Skills

移动端开发技巧集合
831
star
4

xcel

一个基于 Electron 和 Vue 的 Excel 数据过滤工具——凹凸实验室出品 https://aotu.io/notes/2016/11/15/xcel/
Vue
666
star
5

guide

O2前端规范文档
JavaScript
538
star
6

elf

灵活可扩展的 HTML5 构建工具
JavaScript
493
star
7

o2team.github.io

Site of Aotu.io
JavaScript
307
star
8

mac

Best Installation Guides For Full-Stack Developers Using MAC OS - MAC全栈开发环境搭建指南
JavaScript
255
star
9

taro-ebook-source

Taro 掘金小册源码
JavaScript
231
star
10

athena2

Build tool based on Webpack
JavaScript
215
star
11

cases

精选网页应用案例期刊
JavaScript
214
star
12

sign

O2 team mail signature generator
HTML
105
star
13

tech-weekly

JELLY Tech Weekly
JavaScript
104
star
14

sketch-plugin-boilerplate

sketch-plugin-boilerplate
JavaScript
75
star
15

app

Application store for AotuLabs
JavaScript
58
star
16

elf-preloader.js

A simple Javascript library for preload image and audio
JavaScript
57
star
17

wxapp-component-base

京东微信小程序组件方案 - 组件基类
JavaScript
57
star
18

tictactoe-sample

【微信小游戏开发入门:从 0 到 1 实现井字棋游戏】掘金小册示例
JavaScript
47
star
19

elf-orientation.js

A js library extend on DeviceOrientation Event
JavaScript
34
star
20

weapp-css-modules

小程序的简化版css-modules,比标准css-modules代码量更少的优化方案
JavaScript
34
star
21

es5-polyfill

ECMAScript 5 Polyfill for IE-8
JavaScript
30
star
22

timer-miniprogram

小程序定时器管理库,更合理地使用 setTimeout 和 setInterval,在页面显示时重启定时器,页面隐藏时暂停定时器,页面卸载时清除定时器
JavaScript
26
star
23

halojs

JavaScript
24
star
24

athena-component

athena组件平台,提供组件上传、预览、拉取
19
star
25

o2blog-wx

aotu.io文章转公众号自定义排版工具
JavaScript
10
star
26

eslint-config-o2team

ESLint Shareable Config for the O2Team Javascript Style Guide
JavaScript
7
star
27

image-color-utils

图片取色工具
JavaScript
6
star
28

misc

Static assets for aotu.io
6
star
29

books

books published by o2labs
JavaScript
5
star
30

brand

Aotu.io Brand Copyright Protection
HTML
4
star
31

postcss-athena-spritesmith

css spritesmith for athena
JavaScript
3
star
32

image-compress

图片压缩工具
JavaScript
3
star
33

athena-png-native

JavaScript
2
star
34

geeks

极客沙龙·Geek Talks
JavaScript
2
star
35

sketch-app-types

TypeScript declaration files for Sketch App
TypeScript
1
star
36

generator-athena

[DEPRECATED]JDC构建项目生成工具
JavaScript
1
star
37

eslint-config-o2team-rn

ESLint Shareable Config for the O2Team RN Style Guide. Based on eslint-config-o2team.
JavaScript
1
star
38

blog

凹凸实验室博客
1
star
39

eslint-config-o2team-wx

ESLint Shareable Config for the O2Team WXAPP Style Guide. Based on eslint-config-o2team.
JavaScript
1
star