第一个weex任务：图片显示改为串行

问题

公司接入weex大概也有半年多的时间了，sdk的版本是0.6.4，自定义的组件一大堆。不过image这个组件一直没有自定义。
我们的应用有一个“发现”页面，全部是图片，用weex写的。交互抱怨图片加载后，乱显示的，体验很不好，希望一张一张有顺序地显示。
weex提供的image组件，图片下载要自己实现，demo程序是用SDWebImage做的，所以这边也是依样画葫芦。SDWebImage是用NSOperationQueue实现，默认并发数为3，是并行加载的，要求图片顺序显示，怎么可能？
所以，这个问题从去年底就提出来了，一直没人去管，并且还记下来一个坑:
目前图片加载顺序, 异步随机

方案1：Native层自定义组件

• weex SDK中组件对应的Native类是WXImageComponent
• 关于图片下载的过程，用了一个全局的串行队列，套了好几层主线程做下载任务分发。真正的下载过程，通过协议WXImageOperationProtocol让使用者来实现。
• 一般实现都是通过SDWebImage这个第三方库来做的，下载图片是并行的，并发数默认是3
• 估计是将SDWebImage这种第三方库引入weex框架，会导致框架本身太庞大，不合适。所以采用了协议加demo程序这种方式。
• 图片下载过程采用并行方式是合理的，不然，串行下载，性能太差。
• 不过，这里需求是图片顺序显示，那么进行串行下载是最方便的。既然采用SDWebImage这个第三方库，只要将它的最大并发数设置为1，编程串行队列下载，就可以了。、
• 默认的image组件不变，可以参照写法，稍微改一下，新建一个串行的图片组件，比如seiral-image就可以了。自定义组件就可以直接用SDWebImage来实现，不需要WXImageOperationProtocol来过渡。为了不影响默认的image组件，下载过程不要用SDWebImage共享单例，而是新建一个实例变量来做，这样就互不影响。

方案2：通过opacity属性，串行显示图片

• native层组件保持不变，在JavaScript层来控制
• if指令不合适，这个隐藏和native的隐藏含义不一样，是整个结点都不创建，在这里不适用
• 加载过程保持串行不变。加载完成后，native会发送load事件到JavaScript层。
• 默认将图片的opacity设置为0，就算加载完成了，也看不到图片。在收到load事件后，将图片的opacity设置为1，显示图片。这时可以加入一些自定义的逻辑，比如顺序显示等。
• 下面是一个简单的例子：

• imageList: [], 存放图片的信息，比如url就是其中的filePath属性

• loadFlags:[], 存放加载状态信息，false- 图片还没加载；true-图片已经加载
• opacitys:[]，存放图片的opacity值，0-图片隐藏；1-图片显示
• imageLoad(index)为load事件响应函数，native层触发，将图片的序号传给JavaScript层
• stream.fetch()，native层实现，JavaScript层调用的网络取数据函数
• array.$set(index, value)，是weex框架提供数组设置函数，将index的值替换为value。$set是函数名。用这个函数，可以结合weex框架内部的数据绑定机制，可以触发界面元素的重新渲染。
• 在这里，初始化时self.opacitys.$set(i, 0);，weex框架将图片渲染为不可见。当后来self.opacitys.$set(i, 1);``weex框架将图片渲染为可见。如果直接设置self.opacitys[i] = 0或者1，相应的数值值会改变，但是界面元素不会渲染，也就没有图片从一开始的不可见到可见的过程。
• setTimeout函数先套一个匿名函数，然后用另一个变量，比如self来代替this，这样调用才有效果。记住这种用法。