o2team / wxapp-img-loader

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

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 -

wxapp-img-loader's Issues

替换过程有时候会闪一下，有时候就很平滑。

替换过程有时候会闪一下，有时候就很平滑。

这个是不是频繁地调用了setData？

this.page.setData({ 'imgLoadList': list })

这里，每加载一次图片就setData一次，会不会有性能问题？

为什么必须引入img-loader.wxml？

为什么必须引入img-loader.wxml？

自定义组件中如何使用

替换过程有时候会闪一下，有时候就很平滑。

请问有mpvue版本的么？

请问有mpvue版本的么？

如果是图文那种

是要把图片组件隔离出来的吗，就是图片单独一个模块和文字分开是吗

你好，这种做法，如果是大量对图片数据，不会有性能问题吗？

是不是每次张图都提前通过img-loader.wxml加载一次，然后再把图片数据callback返回业务代码里面填充渲染图片？

Taro3 似乎不支持

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

在taro3中似乎有循环setState的问题

多处使用img-loader组件时偶尔会有加载成功后回调函数不执行的情况

循环渲染多个item，每个item包含若干张图片，现在在循环item中加入了img-loader组件，渲染过程中组件在加载图片时会偶尔出现图片加载成功但是未执行回到函数的问题，出现概率比较高。

能否支持点击小图片放大呢

刚开始看小程序。
试了下，直接改img-loader.js，加一个点击事件，貌似没作用