Question

I’m trying to combine a few similar functions into a single functions, which need to make calls to different arrays / variables, but I’m not quite getting it right. Here’s my code:

var initialPreloadArray = ['scenes/icons_orange.png','scenes/icons_blue.png','scenes/icons_green.png','site/pedestal_h.png']; //These must be loaded before we advance from the intro screen
var initialPreloadCounter = 0;
var secondaryPreloadArray = ['site/restart-black.png','site/back_black.png','interludes/city.png','interludes/town.png','interludes/country.png']; //These must be loaded before we can advance from the initial decision scene
var secondaryPreloadCounter = 0;
var vehiclesPreloadArray = ['vehicles/vehicles.png','site/close.png']; //These must be loaded before we can display the vehicles
var vehiclesPreloadCounter = 0;
var arrName; //Store the variable name of the array for the stage of preloading we're in
var arrCounter; //Stores the variable name of the counter for the stage of preloading we're in

function setPreloadStage(preloadStage){
    if (preloadStage == initial){
        arrName = initialPreloadArray;
        arrCounter = initialPreloadCounter;
    } else if (preloadStage == 'secondary'){
        arrName = secondaryPreloadArray;
        arrCounter = secondaryPreloadCounter;
    } else if (preloadStage == 'vehicles'){
        arrName = vehiclesPreloadArray;
        arrCounter = vehiclesPreloadCounter;
    }
    preloadImages(preloadStage);
}



//Recurse through scene xml and populate scene array
function preloadImages(preloadStage) {
    console.log(arrName[arrCounter]);
    var img = new Image();
    img.src = 'images/' + arrName[arrCounter];
    if(!img.complete){
        jQuery(img).bind('error load onreadystatechange', imageComplete(preloadStage));
    } else {
        imageComplete(preloadStage);
    }

    //$j.preloadCssImages({statusTextEl: '#textStatus', statusBarEl: '#status'});
}

function imageComplete(preloadStage){
    arrCounter++;
    var preloadLength = arrName.length-1;
    if (arrName && preloadLength && arrName[arrCounter]) {
        if (preloadLength == arrCounter){
            if (preloadStage == 'initial'){
                initialImagesLoaded();
            } else if (preloadStage == 'secondary'){
                secondaryImagesLoaded();
            } else if (preloadStage == 'vehicles'){
                vehiclesLoaded();
            }
        }
        preloadImages(preloadStage);
    }
}

Anybody have an idea what I’m doing wrong?

Answer 1

I suggest that you should use an array to manage state.

define an array holding your stages, like this:

var stages = [
  { 
     label : 'initial', 
     imgs : [ 'img/whoobee.png', ...more here...], 
     doneSoFar: 0, 
     allDone: function(){} 
  }, 
  { label : 'secondary', imgs : .....}, 
  { label : 'whatever', imgs :  ....}
];

NB: You will need to set the “allDone” fn for each stage appropriately.

Then a fn that kicks off one stage:

function kickoffPreloadOneStage(stage) {
   console.log ("preloading stage " + stage.label);
   preloadNextImage(stage);
}   

function preloadNextImage(stage) {
    var img = new Image();      
    img.src = 'images/' + stage.imgs[stage.doneSoFar];      
    if(!img.complete){      
        jQuery(img).bind('error load onreadystatechange', function() {
             imageComplete(preloadStage);
        });      
    } 
    else {      
        imageComplete(preloadStage);      
    } 
}

function imageComplete(stage){       
    stage.doneSoFar++;       
    var preloadLength = stage.imgs.length-1;       
    if (stage.doneSoFar == preloadLength) {
        stage.allDone(); // call the allDone function. may want to pass stage back
    }
    else {
        preloadNextImage(stage);       
    }       
}  

To do all stages, use code like this:

var i;
for(i=0; i < stages.length; i++) {
    kickoffPreloadOneStage(stages[i]);
}

You can also go OO, defining those functions as members of a Stage() class, but ….what I suggested is a reasonable simplification without getting too complicated.