圖片大量加載形成縮略圖庫

我正在嘗試實現圖片庫，其中圖像以縮略圖形式顯示，只要我選擇某個圖像文件夾即可。圖片大量加載形成縮略圖庫

例如，如果我點擊文件夾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

圖片大量加載形成縮略圖庫

回答

相關問題