防止ItemRenderer内图片Image反复Load的方法

 

防止ItemRenderer内图片Image反复Load的方法

Under flex By admin

我在系统里用了ItemRenderer来显示图片，可是当图片比较多，滚动条来回拉的时候，图片就会反反复复的load进来，浪费了很多网络资源。先来看看我的例子：

<ns1:MyList id="vdList" width="100%" height="100%" variableRowHeight="true" dataProvider="{videoList}" change="selectArticle()">
	<ns1:itemRenderer>
		<mx:Component>
			<mx:HBox width="100%" horizontalAlign="left" verticalAlign="middle" toolTip="{data.toListString()}" horizontalScrollPolicy="off" verticalScrollPolicy="off">
				<mx:Image id="thumbnail" source="{data.img}" width="100" height="100"/>
				<mx:Text text="{data.toListString()}"/>
			</mx:HBox>
		</mx:Component>
	</ns1:itemRenderer>
</ns1:MyList>

为啥会反复Load呢

为了节约资源，每个ItemRenderer对象都要被重复利用（不然可能占资源过多哦）。比如一个List一开始只显示5个 ItemRenderer，它就只生成5个ItemRenderer对象先用着，然后你拖动滚动条滑下去，上面那个“消失”的ItemRenderer对 象就会被用到下面来（放新的内容），这就好像履带一样，对象被反复使用。还是回到图片Image上面来，如果是一般文本，放入新的 ItemRenderer容器是没有问题的（重新显示一下），如果是图片就麻烦了。要知道Image component本身是有缓存的，它存放着上一张图片，现在那个“消失”的ItemRenderer对象很不辛的被用到了下面当新的容器，载入新的数 据，那么图片的URL就变化了，于是它就会重新load新的图片到容器内。ItemRenderer对象被反反复复的装载新数据，就导致了图片被反复 load。

我的办法

我首先想到的还是缓存的办法，缓存Image。为了能及时清空缓存，把Image放到dataprovider里托管比较好，这样 removeAll的时候也能自动清理干净了。Image和dataprovider捆绑，也能使每次ItemRenderer载入对应的Image，当 然Image需要动态的addChild进来了，还要注意addChild之前要检查是不是已经有图片了，需要先清掉。

<ns1:MyList id="vdList" width="100%" height="100%" variableRowHeight="true" dataProvider="{videoList}" change="selectArticle()">
	<ns1:itemRenderer>
		<mx:Component>
			<mx:HBox width="100%" horizontalAlign="left" verticalAlign="middle" toolTip="{data.toListString()}" horizontalScrollPolicy="off" verticalScrollPolicy="off">
				<mx:creationComplete>
					<![CDATA[
 
						if(data)
						{
							if(getChildAt(0) is Image)
							{
								removeChildAt(0);
							}
							addChildAt(data.img2,0);
						}
					]]>
				</mx:creationComplete>
				<mx:show>
					<![CDATA[
						trace("show")
						if(data)
						{
							if(getChildAt(0) is Image)
							{
								removeChildAt(0);
							}
							addChildAt(data.img2,0);
						}
					]]>
				</mx:show>
				<mx:Script>
					<![CDATA[
						import mx.controls.Image;
					]]>
				</mx:Script>
				<!--<mx:Image id="thumbnail" source="{data.img}" width="100" height="100"/>-->
				<mx:Text text="{data.toListString()}"/>
			</mx:HBox>
		</mx:Component>
	</ns1:itemRenderer>
</ns1:MyList>