微信小程序之预加载图片组件wxapp-img-loader

云卓

2023-12-01

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

ps：图片加载完成的回调方法的第一个参数为错误信息（加载成功则为 null），第二个参数为图片信息（Object 类型，包括 src、width 及 height）

6.图片加载示例：

1）加载单张图片

wxml：

<view class="img_wrap">
    <image wx:if="{{ imgUrl }}" src="{{ imgUrl }}" />
</view>

<button bindtap="loadImage">Click To Load Image</button>

<view class="msg">{{ msg }}</view>

<!-- 引入图片预加载组件 -->
<import src="../../img-loader/img-loader.wxml"/>
<template is="img-loader" data="{{ imgLoadList }}"></template>

css：

.img_wrap {
    margin-bottom: 10px;
    width: 750rpx;
    height: 468rpx;
    background: #ececec;
}

image {
    width: 100%;
    height: 100%;
}

.msg {
    margin: 10px 0;
    text-align: center;
}

js：

//引入图片预加载组件
const ImgLoader = require('../../img-loader/img-loader.js')

//缩略图 80x50 3KB
const imgUrlThumbnail = 'http://storage.360buyimg.com/mtd/home/lion1483683731203.jpg'
//原图 3200x2000 1.6MB
const imgUrlOriginal = 'http://storage.360buyimg.com/mtd/home/lion1483624894660.jpg'

Page({
    data: {
        msg: '',
        imgUrl: ''
    },
    onLoad() {
        //初始化图片预加载组件
        this.imgLoader = new ImgLoader(this)
    },
    loadImage() {
        //加载缩略图
        this.setData({
            msg: '大图正在拼命加载..',
            imgUrl: imgUrlThumbnail
        })

        //同时对原图进行预加载，加载成功后再替换
        this.imgLoader.load(imgUrlOriginal, (err, data) => {
            console.log('图片加载完成', err, data.src)
            this.setData({ msg: '大图加载完成~' })

            if (!err)
                this.setData({ imgUrl: data.src })
        })
    }
})

2）加载多张图片

wxml：

<view class="img_list">
    <view wx:for="{{ imgList }}" class="img_wrap">
        <image wx:if="{{ item.loaded }}" src="{{ item.url }}" class="fade_in" />
    </view>
</view>

<button bindtap="loadImages">Click To Load Images</button>

<!-- 引入图片预加载组件 -->
<import src="../../img-loader/img-loader.wxml"/>
<template is="img-loader" data="{{ imgLoadList }}"></template>

css：

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.img_list {
    margin: 10px 0;
    text-align: center;
}

.img_wrap {
    display: inline-block;
    width: 185rpx;
    height: 185rpx;
}

image {
    width: 100%;
    height: 100%;
}

.fade_in {
    animation: fadeIn 1s both;
}

js：

//引入图片预加载组件
const ImgLoader = require('../../img-loader/img-loader.js')

//生成一些测试数据
function genImgListData() {
    let images = [
        'http://img10.360buyimg.com/img/s600x600_jfs/t3586/215/2086933702/144606/c5885c8b/583e2f08N13aa7762.png',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3643/111/394078676/159202/a59f6b72/5809b3ccN41e5e01f.jpg',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3388/167/1949827805/115796/6ad813/583660fbNe5c34eae.jpg',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3163/281/5203602423/192427/db09be58/5865cb7eN808cc6f4.png',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3634/225/410542226/185677/c17f0ecf/5809b073N364fe77e.jpg',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3808/206/329427377/119593/a8cf7470/580df323Nb641ab96.jpg',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3805/133/325945617/116002/e90e0bdf/580df2b5Ncb04c5ac.jpg',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3046/316/3037048447/184004/706c779e/57eb584fN4f8b6502.jpg',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3580/212/1841964843/369414/e78739fb/58351586Ne20ac82a.jpg',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3274/70/4925773051/133266/fae6e84/585c9890Na19001c8.png',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3157/27/5204515328/123020/5f061d81/5865cbcaNfdf0557f.png',
        'http://img10.360buyimg.com/img/s600x600_jfs/t3265/341/5152556931/143928/bdf279a4/5865cb96Nff26fc5d.png'
    ]
    images = images.concat(images.slice(0, 4))
    return images.map(item => {
        return {
            url: item,
            loaded: false
        }
    })
}

Page({
    data: {
        imgList: genImgListData()
    },
    onLoad() {
        //初始化图片预加载组件，并指定统一的加载完成回调
        this.imgLoader = new ImgLoader(this, this.imageOnLoad.bind(this))
    },
    loadImages() {
        //同时发起全部图片的加载
        this.data.imgList.forEach(item => {
            this.imgLoader.load(item.url)
        })
    },
    //加载完成后的回调
    imageOnLoad(err, data) {
        console.log('图片加载完成', err, data.src)

        const imgList = this.data.imgList.map(item => {
            if (item.url == data.src)
                item.loaded = true
            return item
        })
        this.setData({ imgList })
    }
})

3）缩略图的多张图片替换

<!--wxml-->
<view class="img_wrap" wx:for="{{isLoaded?imgUrlOriginal:imgUrl}}">
    <image wx:if="{{imgUrl}}" src="{{item}}" />
</view>

<button bindtap="loadImage">Click To Load Image</button>

<view class="msg">{{msg}}</view>

<!-- 引入图片预加载组件 -->
<import src="../../img-loader/img-loader.wxml"/>
<template is="img-loader" data="{{ imgLoadList }}"></template>


/*css*/
.img_wrap {
    margin-bottom: 10px;
    width: 750rpx;
    height: 468rpx;
    background: #ececec;
}

image {
    width: 100%;
    height: 100%;
}

.msg {
    margin: 10px 0;
    text-align: center;
}

//js
//引入图片预加载组件
const ImgLoader = require('../../img-loader/img-loader.js')

//缩略图 80x50 3KB
const imgUrlThumbnail = ['http://storage.360buyimg.com/mtd/home/lion1483683731203.jpg',
  'http://storage.360buyimg.com/mtd/home/lion1483683731203.jpg',
  'http://storage.360buyimg.com/mtd/home/lion1483683731203.jpg']
//原图 3200x2000 1.6MB
function genImgListData() {
  let images = [
    'http://img10.360buyimg.com/img/s600x600_jfs/t3586/215/2086933702/144606/c5885c8b/583e2f08N13aa7762.png',
    'http://img10.360buyimg.com/img/s600x600_jfs/t3643/111/394078676/159202/a59f6b72/5809b3ccN41e5e01f.jpg',
    'http://img10.360buyimg.com/img/s600x600_jfs/t3388/167/1949827805/115796/6ad813/583660fbNe5c34eae.jpg',
    'http://img10.360buyimg.com/img/s600x600_jfs/t3163/281/5203602423/192427/db09be58/5865cb7eN808cc6f4.png',
    'http://img10.360buyimg.com/img/s600x600_jfs/t3634/225/410542226/185677/c17f0ecf/5809b073N364fe77e.jpg',
    'http://img10.360buyimg.com/img/s600x600_jfs/t3808/206/329427377/119593/a8cf7470/580df323Nb641ab96.jpg',
    'http://img10.360buyimg.com/img/s600x600_jfs/t3805/133/325945617/116002/e90e0bdf/580df2b5Ncb04c5ac.jpg',
    'http://img10.360buyimg.com/img/s600x600_jfs/t3046/316/3037048447/184004/706c779e/57eb584fN4f8b6502.jpg',
    'http://img10.360buyimg.com/img/s600x600_jfs/t3580/212/1841964843/369414/e78739fb/58351586Ne20ac82a.jpg',
    'http://img10.360buyimg.com/img/s600x600_jfs/t3274/70/4925773051/133266/fae6e84/585c9890Na19001c8.png',
    'http://img10.360buyimg.com/img/s600x600_jfs/t3157/27/5204515328/123020/5f061d81/5865cbcaNfdf0557f.png',
    'http://img10.360buyimg.com/img/s600x600_jfs/t3265/341/5152556931/143928/bdf279a4/5865cb96Nff26fc5d.png'
  ]
  // images = images.concat(images.slice(0, 4))  凑够16张
  return images.map(item => {
    return {
      url: item,
      loaded: false
    }
  })
}
Page({
  data: {
    imgUrlThumbnail: imgUrlThumbnail,
    imgUrlOriginal: [
      'http://img10.360buyimg.com/img/s600x600_jfs/t3586/215/2086933702/144606/c5885c8b/583e2f08N13aa7762.png',
      'http://img10.360buyimg.com/img/s600x600_jfs/t3643/111/394078676/159202/a59f6b72/5809b3ccN41e5e01f.jpg',
      'http://img10.360buyimg.com/img/s600x600_jfs/t3388/167/1949827805/115796/6ad813/583660fbNe5c34eae.jpg',
      'http://img10.360buyimg.com/img/s600x600_jfs/t3163/281/5203602423/192427/db09be58/5865cb7eN808cc6f4.png',
      'http://img10.360buyimg.com/img/s600x600_jfs/t3634/225/410542226/185677/c17f0ecf/5809b073N364fe77e.jpg',
      'http://img10.360buyimg.com/img/s600x600_jfs/t3808/206/329427377/119593/a8cf7470/580df323Nb641ab96.jpg',
      'http://img10.360buyimg.com/img/s600x600_jfs/t3805/133/325945617/116002/e90e0bdf/580df2b5Ncb04c5ac.jpg',
      'http://img10.360buyimg.com/img/s600x600_jfs/t3046/316/3037048447/184004/706c779e/57eb584fN4f8b6502.jpg',
      'http://img10.360buyimg.com/img/s600x600_jfs/t3580/212/1841964843/369414/e78739fb/58351586Ne20ac82a.jpg',
      'http://img10.360buyimg.com/img/s600x600_jfs/t3274/70/4925773051/133266/fae6e84/585c9890Na19001c8.png',
      'http://img10.360buyimg.com/img/s600x600_jfs/t3157/27/5204515328/123020/5f061d81/5865cbcaNfdf0557f.png',
      'http://img10.360buyimg.com/img/s600x600_jfs/t3265/341/5152556931/143928/bdf279a4/5865cb96Nff26fc5d.png'
    ],
    isLoaded: false,
    msg: '',
  },
  onLoad() {
    //初始化图片预加载组件
    this.imgLoader = new ImgLoader(this, this.imageOnLoad.bind(this))
  },
  loadImage() {
    //加载缩略图
    this.setData({
      msg: '大图正在拼命加载..',
      imgUrl: imgUrlThumbnail
    })

    //同时发起全部图片的加载
    this.data.imgUrlOriginal.forEach(item => {
      this.imgLoader.load(item)
    })
  },
  imageOnLoad(err, data) {
    console.log('图片加载完成', err, data.src)

    const imgList = this.data.imgUrlOriginal.map(item => {
      if (item == data.src)
        return item
    })
    if (!err) {
      this.setData({ isLoaded: true, msg: '大图加载完毕' })
    }

微信小程序之预加载图片组件wxapp-img-loader

相关阅读

相关文章

相关问答

相关文档