Loading images in JavaScript -

i working on blackjack game in javascript, , have following function:

function loadimages(){ var imagesnum = 0; var imagesloaded = 0;  //make sure cardrects array 0 before repopulating while(cardrects.length > 0){     cardrects.pop();     cardimages.pop(); }  for(var = 0; <= playernum; i++){     cardrects[i] = [];     cardimages[i] = [];     for(var j = 0; j < playerhands[i].length; j++){         imagesnum++;     } }  for(var = 0; <= playernum; i++){     for(var j = 0; j < playerhands[i].length; j++){         cardimages[i][j] = new image();         cardimages[i][j].onload = function(){             imagesloaded++;             console.log("imagesloaded = " + imagesloaded + " , imagesnum = " + imagesnum);             if(imagesloaded == imagesnum){                 console.log("images loaded!");                 draw();             }         }         if(i == playernum && j == 1 && !showdown){             console.log("not showdown yet, see of dealer's 2nd card.");             cardimages[i][j].src = "images/cards/backsandpips/red_back.png";         }         else{             console.log("assigning card image...");             cardimages[i][j].src = playerhands[i][j].imagefile;         }     } } 

}

as can see, after card images loaded, draw() function called. end of draw() function contains part where, if round has ended, winnings calculated , message shown results. fails half time. in recent test, following shown in console:

this followed by:

imagesloaded = 1 , imagesnum = 24 ... imagesloaded = 23 , imagesnum = 24 

then

imagesloaded = 1 , imagesnum = 24 ... imagesloaded = 24 , imagesnum = 24 

loadimages() called once @ time, 2 questions are:

(1) why console first show "[24] assigning card image..." twice? expected course of events shows message once , goes straight loading images. (2) why 23 out of 24 images loaded before image loading process restarts , completes?

i should error occurs when loadimages() called @ end of round, not @ other point.

is there intricacy loading images in javascript i'm unaware of?

first of all, looks though console displays "[24] assigning card image..." multiple times because text displayed whenever not equal playernum. inner loop runs code display text each card in playerhands when first loop hasn't gotten point == playernum.

as problem loading 23/24 images , restarting, can offer debugging suggestion of printing values of , j console @ same point print imagesloaded , imagenum. way can see whether entire loop restarts before loading 24 images.

good luck!