很快微信开发者平台

 找回密码
 注册
查看: 5517|回复: 170

[Demo源码] 微信小程序开发,适用于微信小程序的图片预加载组件

[复制链接]

30

主题

55

帖子

1075

积分

专家路上

积分
1075
 楼主| 发表于 2018-5-8 15:13:26 | 显示全部楼层 |阅读模式
微信小程序开发,适用于微信小程序的图片预加载组件

微信小程序中如何实现图片预加载呢?

一种常用的优化手段是先加载一张缩略图,该缩略图通过样式设置为和原图一样的宽高,这样用户首先能很快速地看到一张模糊的图片,此时再去对原图做预加载,加载完成之后对缩略图进行替换,因为此时图片已经下载过了,所以界面上能无缝地切换为原图显示。

使用步骤如下:

1、将 img-loader 目录拷贝到你的项目中

2、在页面的 WXML 文件中添加以下代码,将组件模板引入
  1. <import src="../../img-loader/img-loader.wxml"/>
  2. <template is="img-loader" data="{{ imgLoadList }}"></template>
复制代码

3、在页面的 JS 文件中引入组件脚本
  1. const ImgLoader = require('../../img-loader/img-loader.js')
复制代码

4、实例化一个 ImgLoader 对象,将 this(当前 Page 对象) 传入,第二个参数可选,为默认的图片加载完成的回调方法
  1. this.imgLoader = new ImgLoader(this)
复制代码

5、调用 ImgLoader 实例的 load 方法进行图片加载,第一个参数为图片链接,第二个参数可选,为该张图片加载完成时的回调方法
  1. this.imgLoader.load(imgUrlOriginal, (err, data) => {
  2.     console.log('图片加载完成', err, data.src, data.width, data.height)
  3. })
复制代码

注:图片加载完成的回调方法的第一个参数为错误信息(加载成功则为 null),第二个参数为图片信息(Object 类型,包括 src、width 及 height)。

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

源码: wxapp-img-loader-master.zip (11.75 KB, 下载次数: 300)
回复

使用道具 举报

13

主题

2459

帖子

6640

积分

S1

积分
6640
发表于 2018-5-8 15:28:05 | 显示全部楼层
谢谢楼主分享......
回复

使用道具 举报

13

主题

2459

帖子

6640

积分

S1

积分
6640
发表于 2018-5-8 15:28:09 | 显示全部楼层
谢谢楼主分享......
回复

使用道具 举报

13

主题

2459

帖子

6640

积分

S1

积分
6640
发表于 2018-5-8 15:28:13 | 显示全部楼层
谢谢楼主分享......
回复

使用道具 举报

13

主题

2459

帖子

6640

积分

S1

积分
6640
发表于 2018-5-8 15:28:16 | 显示全部楼层
谢谢楼主分享......
回复

使用道具 举报

13

主题

2459

帖子

6640

积分

S1

积分
6640
发表于 2018-5-8 15:28:20 | 显示全部楼层
谢谢楼主分享......
回复

使用道具 举报

13

主题

2459

帖子

6640

积分

S1

积分
6640
发表于 2018-5-8 15:28:23 | 显示全部楼层
谢谢楼主分享......
回复

使用道具 举报

13

主题

2459

帖子

6640

积分

S1

积分
6640
发表于 2018-5-8 15:28:26 | 显示全部楼层
谢谢楼主分享......
回复

使用道具 举报

13

主题

2459

帖子

6640

积分

S1

积分
6640
发表于 2018-5-8 15:28:31 | 显示全部楼层
谢谢楼主分享......
回复

使用道具 举报

13

主题

2459

帖子

6640

积分

S1

积分
6640
发表于 2018-5-8 15:28:35 | 显示全部楼层
谢谢楼主分享......
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|手机版|小黑屋|很快微信开发者平台 ( 京ICP备2021022608号 )

GMT+8, 2021-12-3 00:39 , Processed in 0.032008 second(s), 25 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表