Preloading SVG images

Question

I have about a hundred of simple SVG images, which are stored in about five different image folders. Currently, when they are needed to be displayed, they are retrieved right then. This, for the most part, works, but it does sometimes cause flickering, which I would like to eliminate. Is there a way to preload these images prior to when they are needed, so that they would be cached? I've seen some solutions on here, but they mainly deal with a small number of images. Is there a preferred way of doing a high volume preload?

Thanks!

Answer 1

If you have all the URLs of the images you can start to cache them as soon as possible in a JS object using the url, and later just fetch them from there when you need them.

In your page you may have the list of SVG images stored in somewhere, but at the end what you need is just a JS array of URLs string.

Here's a quick example:

// assuming you've gotten the urls from somewhere and put them in a JS array
var urls = ['url_image_1.svg', 'url_image_2.svg', ... ];

var svgCache = {};

function loaded(){
  // just increment the counter if there are still images pending...
  if(counter++ >= total){
    // this function will be called when everything is loaded
    // e.g. you can set a flag to say "I've got all the images now"
    alldone();
  }
}

var counter = 0;
var total = urls.length;

// This will load the images in parallel:
// In most browsers you can have between 4 to 6 parallel requests
// IE7/8 can only do 2 requests in parallel per time
for( var i=0; i < total; i++){
  var img = new Image();
  // When done call the function "loaded"
  img.onload = loaded;
  // cache it
  svgCache[urls[i]] = img;
  img.src = urls[i];
}

function alldone(){
  // from this point on you can use the cache to serve the images
  ...
  // say you want to load only the first image
  showImage('url_image_1.svg', 'imageDivId');
}

// basically every time you want to load a different image just use this function
function showImage(url, id){
  // get the image referenced by the given url
  var cached = svgCache[url];
  // and append it to the element with the given id
  document.getElementById(id).appendChild(cached);
}

Note:

• Consider also the case of error on loading the image, so put a callback also to img.onerror and serve in case some "missing" image as replacement
• There are some more considerations to do here, like some browser quirks with SVGs but the basic solution should work.

Answer 2

Here is a css solution:

.my-class{
    // this will put the rollover image behind and act as a preloader
    background-image:url('../images/svg/btn.svg'), url('../images/svg/btn-over.svg');
}

.my-class:over{
    background-image:url('../images/svg/btn_over.svg');
}