javascript - Why does my image preloading method work? -

my question

the goal make sure images loaded before new game can begin. second solution (fiddle b) achieves goal more consistently , accurately first solution (fiddle a). why?

jsfiddle a

jsfiddle b

methods

here both of fiddle solutions preload images:

• there array of absolute image urls of assets required game
• the init() function has loop generates new canvas image() per url in array
• each newly created image pushed array
• so, have first array containing url strings, , second array containing 'htmlimageelement' objects

fiddle b differs fiddle a, in utilises '.onload' event, plus counter. 2 fiddles use different ways of checking see if image assets have loaded:

fiddle a: compares length of 2 arrays. if match, start game

for (var = 0; < allgameimageurls.length; i++) {         var img = new image();         img.src = allgameimageurls[i];         allgameimages.push(img);         console.log(allgameimages.length);         if (allgameimages.length >= allgameimageurls.length) {             setupgame();         } else {             // images haven't loaded yet             console.log('still loading');             stage.filltext("loading ...", 20, 400);         }     } 

fiddle b: compares second array length counter variable. counter goes 1 every time image's '.onload' event completes.

for (var = 0; < allgameimageurls.length; i++) {     var img = new image();     img.onload = function () {         assetcount++;         console.log('assetcount = ' + assetcount);         setupgame();     };     img.src = allgameimageurls[i];     allgameimages.push(img); } 

my question expanded

fiddle (but not always) triggers start of new game before full list of image assets has been loaded, causing game errors. fiddle b consistently loads of image assets before allowing new game start. can seen in both fiddles 'fully loaded' messages written canvas.

although can see fiddle works better fiddle b, don't understand why superior. not tutorials relating loading htmlimageelements use '.onload', , tutorials don't use seem adequate.

additionally, don't understand why comparing lengths of 2 arrays not accurate comparing second array length counter.

i understand how 2 solutions differ, want know why solution b works better solution a.

previous research

here few examples of previous research have done in order try answer own question.

• an article on pre-loading images doesn't have reference .onload event
• the accepted solution this question not use .onload event, still works
• the accepted solution this other question similar fiddle b (although discovered later). however, explanation of solution hasn't helped me answer own question.

you comparing 2 different approaches: sequential for (which incorrect) , event-based.

image downloading asynchronous process when image src property set browser starts downloading it. can be, however, fast if image had been downloaded browser , cached internally (in fact, blazingly fast). when next iteration starts available (or, @ least, of them available @ end of loop). if clear cache or use incognito mode , download them remote location (not local server) boom! - loop ends no image downloaded @ all.

another approach better game set every image downloaded, not required.

consider following approach:

var length = allgameimageurls.length,     count = 0;  var i, img;  (i = 0; < length; i++) {     img = new image();     img.onload = function () {         count++;         // count increased on every callback         // if number of executed callbacks equals         // number of images images         // downloaded         if (count === length) {             setupgame();         }     };     img.src = allgameimageurls[i];     allgameimages.push(img); }  

the drawback if 1 of images not exist, game never starts need workaround timeout.