jquery / javascript - storing reference to array - not array values

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?

One thing that stands out immediately is that you have if (preloadStage == initial) rather than if (preloadStage == "initial"). Could it be as simple as that? If not, could you explain what the actual problem is? — Daniel Brockman
– Daniel Brockman, Commented Oct 4, 2011 at 18:14
thanks - that was definitely an issue - but didn't solve the overall problem — mheavers
– mheavers, Commented Oct 4, 2011 at 18:41

Daniel Brockman · Accepted Answer · 2011-10-04 18:16:16Z

1

Actually, here’s an even more obvious problem:

jQuery(img).bind('error load onreadystatechange', imageComplete(preloadStage));

You would have to do this:

jQuery(img).bind('error load onreadystatechange', function () {
  imageComplete(preloadStage)
});

answered Oct 4, 2011 at 18:16

Daniel Brockman

19.4k3 gold badges32 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mheavers Over a year ago

thanks - that was also an issue - but did not solve the overall problem

Cheeso · Accepted Answer · 2011-10-04 18:30:35Z

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.

Collectives™ on Stack Overflow

jquery / javascript - storing reference to array - not array values

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related