Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/huangjinlin/mpvue-img-load
a image pre-loader for mpvue
https://github.com/huangjinlin/mpvue-img-load
Last synced: about 2 months ago
JSON representation
a image pre-loader for mpvue
- Host: GitHub
- URL: https://github.com/huangjinlin/mpvue-img-load
- Owner: huangjinlin
- Created: 2018-07-23T08:44:12.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-08-08T06:09:18.000Z (over 6 years ago)
- Last Synced: 2024-11-01T15:47:55.682Z (about 2 months ago)
- Language: JavaScript
- Size: 94.7 KB
- Stars: 27
- Watchers: 2
- Forks: 8
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-mpvue - mpvue-img-load - 图片预加载组件 (组件 / 目录)
README
# mpvue-img-load
小程序图片预加载组件,基于 [mpvue](https://github.com/Meituan-Dianping/mpvue) 框架的重写[wxapp-img-loader](https://github.com/o2team/wxapp-img-loader),更好的满足工程化,模块化,自动化的需求
## 使用方式
1.安装依赖
``` bash
npm install mpvue-img-load
```
2.调用组件-单张图片
``` html
```
``` javascript
import imgLoad from 'mpvue-img-load'
export default {
data () {
return {
imgUrl: ''
}
},
components: {
imgLoad
},
methods: {
loadImage () {
// 加载缩略图 80x50 3KB
this.imgUrl = 'http://storage.360buyimg.com/mtd/home/lion1483683731203.jpg'
// 原图 3200x2000 1.6MB
const imgUrlOriginal = 'http://storage.360buyimg.com/mtd/home/lion1483624894660.jpg'
// 同时对原图进行预加载，加载成功后再替换
this.$refs.imgLoad.load(imgUrlOriginal, (err, data) => {
if (!err) {
this.imgUrl = data.src
}
})
}
}
}
```
3.调用组件-多张图片
``` html
```
``` javascript
import imgLoad from 'mpvue-img-load'
export default {
data () {
return {
imgList: [
{url:'http://img10.360buyimg.com/img/s600x600_jfs/t3586/215/2086933702/144606/c5885c8b/583e2f08N13aa7762.png',loaded:false},
{url:'http://img10.360buyimg.com/img/s600x600_jfs/t3643/111/394078676/159202/a59f6b72/5809b3ccN41e5e01f.jpg',loaded:false},
]
}
},
components: {
imgLoad
},
methods: {
loadImage () {
this.imgList.forEach((item, index, list) => {
this.$refs.imgLoad.load(item.url,(err, data) => {
item.loaded = true
})
})
}
}
}
```
注:
(1) load 方法进行图片加载，第一个参数为图片链接，第二个参数可选，为该张图片加载完成时的回调方法
(2)图片加载完成的回调方法的第一个参数为错误信息（加载成功则为 null），第二个参数为图片信息（Object 类型，包括 src、width 及 height）。
(3)demo运行效果如下图所示：
