all the script is running before the Images are loaded. In Action Script 2.0

Question

I have a Image loading Issue. Where in, all the Images were getting loaded at the same time & because of this all the versions IE browsers were getting hanged. (I have around 100 Images to be loaded. a total size of 32.5 MB) Mozilla was working fine though. So I decided to download each Image at a time using a preloader. Below is the script. But it seems like the function LoadZones(index:Number) is being called over again. and all the Images are starting to download again, causing a hang.

//////////////////// cards = 100; dropzones = 5; _root.loadstatus.cardcount.text = cards; _root.loadstatus.dropzonecount.text = dropzones; _root.loadstatus.dropzonelabel.text = "Loading...";

var i:Number=0,j:Number=0,Exit1:Boolean=false,Exit2:Boolean=false;
LoadZones(i);
function LoadZones(index:Number)
{
 if(_root.loadstatus.dropzonelabel.text != "Completed!")
 {
  var listener = new Object();
  i = Number(index);
  var zone:MovieClip=_root["dropzone" + String(i)];

  pb1.target = zone._name;

  // the onLoadComplete triggers when all objects are loaded and the progress bar fill animation ends
  listener.onLoadComplete = function(evt) {
   i++;
   trace(pb1.target + "Load Complete!");
   if(i < dropzones){
    _root.loadstatus.dropzonestatus.text = i+1;
    LoadZones(Number(i));
   }else{

    _root.loadstatus.dropzonelabel.text = "Completed!";
    _root.loadstatus.cardlabel.text = "Loading...";
    trace("call cards" + i);
    LoadCards(j);
    Exit1 = true;
    return false;
   }
  }
  if(Exit1 == false){
   pb1.addEventListener("onLoadComplete",listener);
   trace("LoadZones(index:Number):   ------------- "+index);

   zone.autoLoad = false;
   zone.scaleContent = true;
   zone.contentPath= "dropzone"+(i+1)+".jpg";
   zone.load();
  }
 }
 return;
}

function LoadCards(index:Number)
{
 if(_root.loadstatus.cardlabel.text != "Completed!")
 {
  var listener = new Object();
  j = Number(index);
  var card:MovieClip=_root["card" + String(j) + "z"];

  pb1.target = card._name;

  // the onLoadComplete triggers when all objects are loaded and the progress bar fill animation ends
  listener.onLoadComplete = function(evt) {
   j++;
   trace(pb1.target + "Load Complete!");
   if(j < cards){
    _root.loadstatus.cardstatus.text = j;
    LoadCards(Number(j));
   }else{
    loadComplete();
    Exit2 = true;
    return false;
   }
  }
  if(Exit2 == false){
   pb1.addEventListener("onLoadComplete",listener);
   trace("LoadCards(index:Number):   ------------- "+index);
   card.autoLoad = false;
   card.scaleContent = true;
   card.contentPath= "image"+(j+1)+".jpg";
   card.load();
  }
 }
}


function loadComplete()
{
 var k:Number =0;
 _root.loadstatus.cardlabel.text = "Completed!";
 DrawZones();
 for (k = 0; k < dropzones; k++)
 {
  _root["dropzone" + k]._alpha = 100;
  _root["LeftScroll" + k]._alpha = 100;
  _root["Rightscroll" + k]._alpha = 100;
  _root["dropzone" + k]._xscale = zonewidth;
  _root["dropzone" + k]._yscale = zoneheight;
 };
 DrawCards();
 for (k = 0; k < cards; i++)
 {
  _root["card" + k + "z"]._alpha = 100;
  _root["card" + k + "z"]._xscale = cardwidth;
  _root["card" + k + "z"]._yscale = cardheight;
 }
 _root.CardScrollRight._alpha = 100;
 _root.cardscrollleft._alpha = 100;
 _root.pb1._visible = false;
 _root.grayscreen._visible = false;
 _root.loadstatus._visible = false;
 return false;
}
////////////////////

Answer 1

Hello. Assuming that the card and zone objects are used for some display purpose and don't call back methods in their parents so that they won't interfere with the actual loading, I've rewritten a little the code, with variables to (hopefully) make more sense.

var zoneLoaderListener:Object = new Object();
var cardLoaderListenr:Object = new Object();

var dropzones = 5;
var cards = 100;
var loadedDropZones = 0;
var loadedCards = 0;

function loadZone(index) {

    var i = Number(index);
    var zone:MovieClip=_root["dropzone" + String(i)];

    pb1.target = zone._name;

    pb1.addEventListener("onLoadComplete", zoneLoaderListener);

    trace("LoadZones(index:Number):   ------------- "+index);
    zone.autoLoad = false;
    zone.scaleContent = true;
    zone.contentPath= "dropzone"+(i+1)+".jpg";
    zone.load();

}
function loadCard(index) {

    var j = Number(index);
    var card:MovieClip=_root["card" + String(j) + "z"];

    pb1.target = card._name;

    pb1.addEventListener("onLoadComplete", cardLoaderListener);
    trace("LoadCards(index:Number):   ------------- "+index);
    card.autoLoad = false;
    card.scaleContent = true;
    card.contentPath= "image"+(j+1)+".jpg";
    card.load();

}

zoneLoaderListener.onLoadComplete = function (evt) {
    loadedDropZones++;
    trace(pb1.target + "Load Complete!");
    if(loadedDropZones < dropZones){
     _root.loadstatus.dropzonestatus.text = loadedDropZones+1;
     loadZone(loadedDropZones);
    }else{
     // reached end
     // no need to load another zone, just begin loading cards
     _root.loadstatus.dropzonelabel.text = "Completed!";
     _root.loadstatus.cardlabel.text = "Loading...";
     //trace("call cards" + i);
     loadCard(0);
    }
}
cardLoaderListener.onLoadComplete = function (evt) {
    loadedCards++;
    trace(evt.target + "Load Complete!");
    if(loadedCards < cards){
     _root.loadstatus.cardstatus.text = loadedCards;
     loadCard(loadedCards);
    }else {
     // last card completed loading
     loadComplete();
    }
}
function loadComplete() {
    trace("Last card completed loading");
}

// init the loading sequence
loadZone(0);

I've tried to keep as much from your code as possible. Maybe the biggest change would be that we now have only one listener function for each type of loading, and we don't redefine a new listener object for each load. Hope nothing is screwed up, as I can't test this code.

Best of luck