Loading issue thumbnails

Question

I'm having issue while loading thumbnail, I set an interval of time for each thumb to load on stage. Some of them can't load sequential in order, they are missing, are lagging...

Actually, I set a preloader to the file size but since I load dynamically from XML, file size is smaller.

Does anyone know a solution to solve that issue? It's really bug me though...

I load with XML file and don't have any issue with parsing process.

Sometimes all thumbnails can be loaded on Stage, if bandwidth a bit slow it's lagged mean first thumb is loading then it's suddenly skip the second thumbnail, it loads third thumbnail instead and so on...

Sometimes it can load the whole thumbnails... it's weird

Here, I set a timer to load each thumbnail

protected static const INTERVAL_TIME:uint       = 1000;
initLoadTime = new Timer(INTERVAL_TIME);
initLoadTime.addEventListener(TimerEvent.TIMER, handleLoadedEachThumbnail, false, 0, true);
initLoadTime.start();

protected function handleLoadedEachThumbnail(event:TimerEvent):void
{
var container:MovieClip = new MovieClip();

if (currentIndex < tabPhoto.length) {
 thumbnailPositionMC = positionEachThumbnail();
 container.addChild(thumbnailPositionMC);
 addChild(container);


 currentIndex++;
}

if (currentIndex == tabPhoto.length) {
 currentIndex = 0;
 initLoadTime.removeEventListener(TimerEvent.TIMER, handleLoadedEachThumbnail);
 initLoadTime.stop();
}

}

Answer 1

I think it would be better to create a loop and use the loader's Event.COMPLETE to know when to load the next thumbnail instead of using an interval. That way you will avoid conflicts.

var imageLoader:Loader;
var currentImageLoading:uint;
var thumbsToLoad:Array; //array of strings of paths to the thumbnail

function loadThumbs(thumbs:Array):void
{
    currentImageLoading = 0;
    thumbsToLoad = thumbs;
    loadNextThumb();

function loadNextThumb():void
{
    imageLoader = new Loader();
    var imageUrl:String = thumbsToLoad[currentThumbLoading];
    var imageRequest:URLRequest = new URLRequest( imageUrl );
    imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadThumbComplete);
    imageLoader.load( imageRequest );
}

function loadThumbComplete(e:Event):void
{
    // do stuff with loaded thumb here
    var thumb:Sprite = new Sprite();
    thumb.addChild(imageLoader.content);
    trace(thumb.width);
    currentThumbLoading++;
    if (currentThumbLoading < thumbsToLoad.length) {
        loadNextThumb();
    } else {
        // loading cycle is complete
    }
}

Edited after comments

I fixed the loadThumbComplete to take the event parameter. To get the width of the loaded thumb I prefer to take the content from the imageLoader and put it in a Sprite.

Answer 2

Here are my code, I'm not sure where to use Event.Complete through my code though...

protected function handleLoadedPhotos(event:Event):void {
if ((event.target as URLLoader) != null) {
    xmlItems = new XML(event.target.data);

    var childLength:uint = xmlItems.children().length();

    for (var i:uint=0;i < childLength;i++) {
        var tabPhotoInfo:ThumbInfo = new ThumbInfo();

        // Set the ID 
        tabPhotoInfo.id = xmlItems.children()[i].@id;

        // Set url image 
        for (var j:uint=0;j < xmlItems.children()[i].children().length();j++) {
            tabPhotoInfo.url = xmlItems.children()[i].children()[j].toString();
        }

        tabPhoto.push(tabPhotoInfo);
    }               
}

setLoadBitmap();
dispose(); // Remove useless ressources after loaded                    

}

protected function setLoadBitmap():void {
var tabPhotosLength:uint = tabPhoto.length;

for (var index:uint=0;index < tabPhotosLength;index++) {
    // Insert each image name to bitmap to process the resize aspect ratio
    tabThumbnail.push(new Thumbnail(tabPhoto[index].url));
}

// Create next/previous buttons
previousButtonContainer = createPreviousButtons();
nextButtonContainer     = createNextButtons();

// Add events to next and previous buttons
addEventListeners(previousButtonContainer, handleMoveThumbnail, handleMouseOverAndOut);
addEventListeners(nextButtonContainer, handleMoveThumbnail, handleMouseOverAndOut);

// Set time interval to load each thumbnail on stage
initTime(); // <<== call this method which is those codes above

}

protected function dispose():void {
loadXML.loader.removeEventListener(Event.COMPLETE, handleLoadedPhotos);
loadXML.loader.removeEventListener(ProgressEvent.PROGRESS, handleLoadedPhotos);
loadXML.loader.removeEventListener(IOErrorEvent.IO_ERROR, handleLoadedPhotos);
loadXML.loader = null;

}

Answer 3

I got that annoying error message: RangeError: Error #1125: The index 4 is out of range 4.

In my XML file: it contains 4 image url files

This time all pictures can load on Stage and well positionned like I want but there's an Range error compiling...

Does anyone know How can I solve it?

I have modified my code to:

protected function loadNextThumb():void
    {
        imageLoader = new Loader();
        var imageURL:String = tabPhoto[currentIndex].url;

        imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleCompletedLoadedThumb, false, 0, true);
        imageLoader.load(new URLRequest(imageURL));
    }

protected function handleCompletedLoadedThumb(event:Event):void
    {
        //var thumb:Sprite = new Sprite();
        //thumb.addChild(imageLoader.content);

        //tabThumbWidthIncrement[currentIndex] = imageLoader.x;
        //currentIndex++;

        if (currentIndex <= tabPhoto.length) {
            trace(currentIndex); // this gives 0,1,2,3

            imageLoader.alpha = 0;

            // Display and position each thumb (imageLoader) on Stage
            imageLoader.x = totalWidth;

            if (event.currentTarget.width >= WIDTH_LANDSCAPE) {
                totalWidth += (event.currentTarget.width+SPACE);
                trace('>>> Landscape'+" >>ImageWidth: "+event.currentTarget.width);
            } else {
                totalWidth += (event.currentTarget.width+SPACE);
                trace('*** Portrait'+" >>ImageWidth: "+event.currentTarget.width);
            }

            addChild(imageLoader);
            thumbnailContainer.addChild(imageLoader);
            addChild(thumbnailContainer);

            tabThumbWidthIncrement[currentIndex] = imageLoader.x;
            currentIndex++;

            // Animate fading
            TweenLite.to(imageLoader, TIME, { delay:DELAY, alpha:ALPHA_ON, ease:Linear.easeOut });

            loadNextThumb();
        } else {
            // When completed loaded then... 
            imageLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, handleCompletedLoadedThumb);
            imageLoader = null;
            currentIndex = 0;
        }
    }

Answer 4

I have declared tabPhoto and tabThumbWidthIncrement as Vector

var tabPhoto:Vector.<ThumbInfo> = new Vector.<ThumbInfo>;
var tabThumbWidthIncrement:Vector<uint> = new Vector.<uint>;