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

Question

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

例如，如果我单击文件夹 A，它会将所有图像加载到数组列表中，该数组列表将设置为我的列表中的 dataProvider 以创建图块布局。

但我意识到，如果我有 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.wastedpotial.com/?p=38
http://code.google.com/p/bulk-loader/
http://tutorials.flashmymind.com/2009/02/loading-multiple-图片/

使用 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，但提供更多选项、更好的性能和更小的文件大小。看看该页面上的示例。它正是您正在寻找的。

Answer 3

我有一个网站，一个目录中约有 500 张奇怪的照片。我制作了一个简单的 HTML 页面，可以同时加载所有大约 500 个奇怪的缩略图。仅加载缩略图就需要超过 15 MB 的 HTTP 流量。

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

仔细看看您实际使用了多少数据 - 您可能会意识到您感知到的速度下降是非常合理的。