7

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!

jldavis76
  • 812
  • 2
  • 15
  • 42
  • possible duplicate of [Preloading images with jQuery](http://stackoverflow.com/questions/476679/preloading-images-with-jquery) – bvdb May 29 '15 at 18:28

2 Answers2

7

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.
MarcoL
  • 9,829
  • 3
  • 37
  • 50
  • Thanks for the very detailed answer! Once they've been cached, can I still make the call to them like I did previously, and it'll just pull it from the cache, or do I need to use the svgCache array? Sorry for my ignorance on this! – jldavis76 May 29 '15 at 19:25
  • I've added a function to append the image to the DOM and how to call it in the `alldone` function. – MarcoL May 29 '15 at 19:34
  • Thanks again! One last question...where would you recomment I put this script? In the head tags? – jldavis76 May 29 '15 at 19:49
  • As soon as you have the image list ready for performance. Or together with the rest of your scripts if you want to keep all clean. – MarcoL May 29 '15 at 19:51
  • I keep getting an error stating "Uncaught TypeError: Cannot read property 'appendChild' of null", even though the id I pass into is a valid id on my DOM...any ideas? – jldavis76 May 29 '15 at 20:25
  • Sorry, my bad. It's without the hash (`#`) the id. – MarcoL May 29 '15 at 20:28
0

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');
}
Kilazur
  • 3,089
  • 1
  • 22
  • 48
Sylvie Tessier
  • 1