我正在尝试创建一个照片库,每当我选择某个图像文件夹时,图像就会以缩略图显示。
例如,如果我点击文件夹A,它会将所有图像加载到一个arraylist中,该列表将被设置为我的列表中的dataProvider以创建tilelayout。
但是我意识到,如果我有500张图片,每当我向下滚动滚动视图时,都会有一些滞后。
在显示之前,有没有办法首先加载我的所有图像? 或任何方式使其不那么迟钝
<s:List id="list" includeIn="initialScreen,thumbnailState" x="372" y="25" width="600"
height="750" dataProvider="{imageList}"
itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
click.thumbnailState="list_clickHandler(event)">
<s:layout>
<s:TileLayout horizontalGap="15" orientation="rows" verticalGap="15"/>
</s:layout>
</s:List>
答案 0 :(得分:1)
http://www.wastedpotential.com/?p=38
http://code.google.com/p/bulk-loader/
http://tutorials.flashmymind.com/2009/02/loading-multiple-images/
使用AS3 QueueLoader - 它使我能够将资源添加到队列中,并且仍将我的预加载保持为一个进程。
以下是一些将图像添加到队列中的代码。
private function init():void {
_oLoader = new QueueLoader();
_oLoader.addItem(PATH+cssURL, css, {title:'cssContent'});
_oLoader.addItem(PATH+"xml/copy.xml", pageXML, {title:'pageXML'});
_oLoader.addEventListener(QueueLoaderEvent.ITEM_PROGRESS, onItemProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, onItemComplete, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_PROGRESS, onQueueProgress, false, 0, true);
_oLoader.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, onQueueComplete, false, 0, true);
_oLoader.execute();
}
private function onItemComplete(evt:QueueLoaderEvent):void {
if (evt.title == 'cssContent')
{
css = StyleSheet(evt.content);
}
if(evt.title == 'pageXML'){
pageXML = XML(evt.content);
processXML(); // creates page objects based on XML
for(var i:int=0; i<pageXML.PARENT.length(); i++){
//loops through XML for background images and adds them to various
//sprite layers for simple turning on and off
numSubPages = pageXML.PARENT[i].PAGE.length();
var pageImgHolder = new Sprite();
pageImgHolder.name = 'page'+i;
pageImgHolder.x = 0; pageImgHolder.y = 0;
bgImgHolder_mc.addChild(pageImgHolder);
for(var j:int=0; j<numSubPages; j++){
if(String(pageXML.PARENT[i].PAGE[j].@IMAGE) !== ''){
bgImg = new Sprite();
bgImg.name = 'page'+i+'img'+j;
bgImg.alpha = 0;
pageImgHolder.addChild(bgImg);
_oLoader.addItem(PATH+'images/'+pageXML.PARENT[i].PAGE[j].@IMAGE, bgImg, {title:'page'+i+'img'+j})
trace(pageImgHolder.parent.name+'/'+bgImg.parent.name+'/'+bgImg.name+' = '+pageXML.PARENT[i].PAGE[j].@IMAGE);
}
}
}
xmlLoaded = true;
}
}
private function onQueueComplete(evt:QueueLoaderEvent):void {
trace("** "+evt.type);
imgHolderLoaded = true;
Preloader.instance.spinnerDone();
startMovie();
bgImgHolder_mc.turnOnImg(0, 0);
//turns on image for page 0, subpage 0 (i have a very complicated architecture)
}
我希望这会对你有所帮助。
答案 1 :(得分:1)
Greensock有一个名为LoaderMax的神奇新装载程序类。它类似于BulkLoader或QueueLoader,但提供了更多选项,更好的性能和更小的文件大小。看看他们在that page上的例子。它完全符合您的要求。
答案 2 :(得分:0)
我的网站在一个目录中有大约500张奇怪的照片。我创建了一个简单的HTML页面,同时加载所有~500多个缩略图。单独加载缩略图会占用超过15兆字节的HTTP流量。
这将超出一些浏览器的能力和未来几年的一些连接。 (这很适合我。)
仔细看看你实际使用了多少数据 - 你可能会发现你感觉到的减速是非常合理的。