preloader - JavaScript, set same image source to different images (preload) -

sorry, maybe not correct title.. have next question: want make preloading progress bar. , stuck on 1 problem.

[code 1]:

//preloader code  var img = [];  img[0] = new image();  img[0].src = 'test0.jpg';  img[0].onload = function(){    //some code  }  //.....  img[100] = new image();  img[100].src = 'test100.jpg';  img[100].onload = function(){    //some code  }    //.....  //  images loaded  //.....  /*  expample  in part of code need put image 'test0.jpg' html  */  var temp_img = new image();  temp_img.src = 'test0.jpg';

the question : download 'test0.jpg' again or take cache?

or better [code 2]:

//preloader code  var img = [];  img['test0'] = new image();  img['test0'].src = 'test0.jpg';  img['test0'].onload = function(){    //some code  }  //.....  img['test100'] = new image();  img['test100'].src = 'test100.jpg';  img['test100'].onload = function(){    //some code  }    //.....  //  images loaded  //.....  /*  expample in part of code need put image 'test0.jpg' html  */  var temp_img = img['test0'];  // draw temp_img

i want use code 1. slow down app? or better use code 2? in advance.

both methods have benefits , drawbacks.

the first method lighter on image elements , general rule, fewer dom elements generate, better. there chance, though, browser not serve image cache depending on how information being loaded. worst case, need fetch network again if browser has removed image cache.

the second method safer , keep image held in memory, meaning if browser doesn't cache it, it's still available. it's heavier on image elements, though.

which solution better depends on situation. if you're not loading large amount of images, i'd solution 1 better choice leverages browser's cache. if can't afford reload images off network, though, solution 2 safer.

tl;dr solution 1 shouldn't slow down application, solution 2 ensure don't fetch network again.