photo load order mess up as3

问题

I have created a container(or a movieclip) that will add the photos in order and display on the stage. however, because of the different file size, it will add the smallest file size photo first. how i can solve this issue. please see the sample code below

// image0.jpg -> 3k
// image1.jpg -> 2k
// image2.jpg -> 1k
// image3.jpg -> 2k
// image5.jpg -> 1k

var photoPath:Array = new Array();
var photoContainer:MovieClip = new MovieClip();

photoPath.push('image0.jpg');
photoPath.push('image1.jpg');
photoPath.push('image2.jpg');
photoPath.push('image3.jpg');
photoPath.push('image4.jpg');

for(var i = 0; i < photoPath.length; i++)
{
    var loader:Loader = new Loader();
    loader.load(URLRequest(photoPath[i]));
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, photoLoaded);
}

function photoLoaded(e:Event):void
{
    photoContainer.addChild(e.target.content);
}

//output will looks like (image2,image5,image1,image3,image0) instead of 0,1,2,3,4,5

回答1:

There are quite a few ways to handle this issue, probably the easiest way to retrofit your current code is to add the Loader to the displaylist as it is instantiated. This will guarantee that they're placed in the photoContainer in the correct order. If you absolutely need the bitmap itself to be in the displaylist as opposed to the loader itself, you can address this in your photoLoaded method:

import flash.display.Loader;

var photoPath:Array = new Array();
var photoContainer:MovieClip = new MovieClip();

photoPath.push('image0.jpg');
photoPath.push('image1.jpg');
photoPath.push('image2.jpg');
photoPath.push('image3.jpg');
photoPath.push('image4.jpg');

for(var i = 0; i < photoPath.length; i++)
{
    var loader:Loader = new Loader();
    photoContainer.addChild(loader);  //add the loader to photoContainer
    loader.load(new URLRequest(photoPath[i]));
    //you only actually have to listen for complete below if you want to replace the loader with its contents 
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, photoLoaded);
}

function photoLoaded(e:Event):void
{
    var loader:Loader = e.target.loader;
    var index:int = photoContainer.getChildIndex(loader);
    // this will add the contents of the loader in the same order the loader was originally added
    photoContainer.addChildAt(loader.content, index);
    photoContainer.removeChild(loader);
}

回答2:

Simply loads and adds the photos to the container in the order given in the array:

var photoPath:Array = new Array();
var photoContainer:MovieClip = new MovieClip();
var i:int = 0;

photoPath.push('image0.jpg');
photoPath.push('image1.jpg');
photoPath.push('image2.jpg');
photoPath.push('image3.jpg');
photoPath.push('image4.jpg');

loadPhoto(i);

function loadPhoto(i:int):void
{
    var loader:Loader = new Loader();
    loader.load(new URLRequest(photoPath[i]));
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, photoLoaded);
}

function photoLoaded(e:Event):void
{
    photoContainer.addChild(e.target.content);
    trace(e.target.url); // Verify
    if(i<photoPath.length-1) loadPhoto(++i);
}

Output:

image0.jpg
image1.jpg
image2.jpg
image3.jpg
image4.jpg

来源：https://stackoverflow.com/questions/14780690/photo-load-order-mess-up-as3

标签

actionscript-3

flash

loader