javascript - Preloading SVG images -

i have hundred of simple svg images, stored in 5 different image folders. currently, when needed displayed, retrieved right then. this, part, works, cause flickering, eliminate. there way preload these images prior when needed, cached? i've seen solutions on here, deal small number of images. there preferred way of doing high volume preload?

thanks!

if have urls of images can start cache them possible in js object using url, , later fetch them there when need them.

in page may have list of svg images stored in somewhere, @ end need js array of urls string.

here's quick example:

// assuming you've gotten urls somewhere , put them in js array var urls = ['url_image_1.svg', 'url_image_2.svg', ... ];  var svgcache = {};  function loaded(){   // increment counter if there still images pending...   if(counter++ >= total){     // function called when loaded     // e.g. can set flag "i've got images now"     alldone();   } }  var counter = 0; var total = urls.length;  // load images in parallel: // in browsers can have between 4 6 parallel requests // ie7/8 can 2 requests in parallel per time for( var i=0; < total; i++){   var img = new image();   // when done call function "loaded"   img.onload = loaded;   // cache   svgcache[urls[i]] = img;   img.src = urls[i]; }  function alldone(){   // point on can use cache serve images   ...   // want load first image   showimage('url_image_1.svg', 'imagedivid'); }  // every time want load different image use function function showimage(url, id){   // image referenced given url   var cached = svgcache[url];   // , append element given id   document.getelementbyid(id).appendchild(cached); } 

note:

• consider case of error on loading image, put callback img.onerror , serve in case "missing" image replacement
• there more considerations here, browser quirks svgs basic solution should work.