图片大量加载形成缩略图库

我正在尝试实现图片库，其中图像以缩略图形式显示，只要我选择某个图像文件夹即可。图片大量加载形成缩略图库

例如，如果我点击文件夹A，它会将所有图像加载到一个数组列表中，该列表将被设置为我的List中的dataProvider以创建tilelayout。

但我意识到，如果我有500个图像，并且每当我向下滚动我的滚动视图时，它都会滞后。

有什么方法可以在显示之前首先加载我所有的图像？或者有什么办法让它少laggy

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

来源

2011-11-18 user1004413

我有一个目录〜500张多元照片的网站。我制作了一个简单的HTML页面，可以同时加载所有〜500个奇怪的缩略图。单独加载缩略图会占用15兆字节的HTTP流量。

这将会超出一些浏览器和一些连接的能力。（它适合我。）

仔细研究一下您实际使用的数据量 - 您可能会意识到您感知的减速是非常合理的。

来源

2011-11-18 04:07:28 sarnold

我正在实现一个桌面应用程序，嗯，应用程序似乎运行在100-200mb范围内，但是当我向下滚动以查看更多图像时，它往往会加载我的图像。它看起来像列表和tilelayout加载你的图像，当你滚动到它布局的图像区域。而不是一次加载全部。 – user1004413

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][email protected]) !== ''){ 
     bgImg = new Sprite(); 
     bgImg.name = 'page'+i+'img'+j; 
     bgImg.alpha = 0; 

     pageImgHolder.addChild(bgImg); 

     _oLoader.addItem(PATH+'images/'+pageXML.PARENT[i].PAGE[j][email protected], bgImg, {title:'page'+i+'img'+j}) 
     trace(pageImgHolder.parent.name+'/'+bgImg.parent.name+'/'+bgImg.name+' = '+pageXML.PARENT[i].PAGE[j][email protected]); 
     } 
    } 
    } 
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) 
}

我希望这可以帮助你。

来源

2011-11-18 05:04:43

Greensock有一个梦幻般的新装载机类叫LoaderMax。它与BulkLoader或QueueLoader相似，但提供了更多选项，更好的性能和更小的文件大小。看看他们的例子that page。它完全符合你的要求。

来源

2011-11-18 14:45:13

图片大量加载形成缩略图库

回答

相关问题