BULK of Images Loading to form a Thumbnail Gallery

问题:

I am trying to achieve a Photo gallery where images are showed in thumbnails whenever i select a certain folder of images.

For example, if i were to click on the folder A, it will load all the images into a arraylist which will be set as the dataProvider for in my List to create the tilelayout.

But i realized that, if i have 500 images, and whenever i scroll down on my scrollview, it kind of lags.

Is there any way where it will load all my images first, before displaying? Or any way to make it less 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>

回答1:

http://www.wastedpotential.com/?p=38
http://code.google.com/p/bulk-loader/
http://tutorials.flashmymind.com/2009/02/loading-multiple-images/

Using AS3 QueueLoader -- it enabled me to add assets to the queue , and still kept my preloading as one process.

Here is some code that adds images to the queue.

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

I hope this helps you.

回答2:

Greensock has a fantastic new loader class called LoaderMax. It's similar to BulkLoader or QueueLoader, but offers a lot more options, better performance, and a smaller filesize. Take at look at their examples on that page. It does exactly what you're looking for.

回答3:

I have a website with ~500 odd photos in one directory. I made a simple HTML page that loads all ~500 odd thumbnails simultaneously. Loading the thumbnails alone takes over 15 megabytes of HTTP traffic.

That's going to be outside the abilities of some browsers and some connections for years to come. (It suits me fine.)

Take a closer look at how much data you're actually using -- you might come to realize your perceived slowdowns are very reasonable.