Question

我正在尝试创建一个照片库，每当我选择某个图像文件夹时，图像就会以缩略图显示。

例如，如果我点击文件夹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>

Answer 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)
}

我希望这会对你有所帮助。

Answer 2

Greensock有一个名为LoaderMax的神奇新装载程序类。它类似于BulkLoader或QueueLoader，但提供了更多选项，更好的性能和更小的文件大小。看看他们在that page上的例子。它完全符合您的要求。

Answer 3

我的网站在一个目录中有大约500张奇怪的照片。我创建了一个简单的HTML页面，同时加载所有~500多个缩略图。单独加载缩略图会占用超过15兆字节的HTTP流量。

这将超出一些浏览器的能力和未来几年的一些连接。（这很适合我。）

仔细看看你实际使用了多少数据 - 你可能会发现你感觉到的减速是非常合理的。

大量图像加载以形成缩略图库

3 个答案: