javascript - Load list of images in sequential order -

i'm working on website uses expressionengine create list of images img1, img2, img3 etc id , creates array sources imgaddresses[1], imgaddresses[2], imgaddresses[3] etc.

i'm attempting create function loads first image, (when first loaded), load second, third etc. following have far:

function loadimage(counter) {     var = document.getelementbyid("img"+counter);     if(counter==imgaddresses.length) { return; }     i.onload = function(){         loadimage(counter+1)     };      i.src = imgaddresses[counter]; }  document.onload=loadimage(0); 

it works when refreshing page, not when accessing page via url. far can tell research, because onload event not fired when cached image loaded, , refreshing page clears cache, whereas accessing page via url not.

research suggests assigning src of image after declaring onload event around this, not seem have solved in case. thinking may because onload event recursive in case.

does have ideas on how make sure browser loaded fresh copy of image, rather cached version? or whether there better way write function? help!

edit: 1 solution have found change img source assignment to:

i.src = imgaddresses[counter] + '?' + new date().gettime(); 

this forces user load fresh copy each time, guess not solution, workaround

the thing can not attaching document.onload handler correctly. cannot tell if fix issue because image.onload not reliable in browsers, onload should set function reference , that's not doing.

instead, should have like:

function loadimage(counter) {     //initialize counter 0 if no counter passed     counter = counter || 0;     var = document.getelementbyid("img"+counter);     if(counter==imgaddresses.length) { return; }     i.onload = function(){         loadimage(counter+1)     };      i.src = imgaddresses[counter]; }  document.onload = loadimage; //instead of loadimage(0);