Question

I need to be able to preload images which are stored in a dataattribute of an img tag

   <div id="slider" class="nivoSlider">
      <a href="#"><img src="http://domain.com/wp-content/themes/xx/images/heros/1-Image.jpg" data-overlay1="http://domain.com/wp-content/themes/xx/images/heros/1-Blog.png" data-overlay2="http://domain.com/wp-content/themes/xx/images/heros/1-anotherimage.png" /></a>

    <a href="#"><img src="http://domain.com/wp-content/themes/xx/images/heros/2-Image.jpg" data-overlay1="http://domain.com/wp-content/themes/xx/images/heros/2-Blog.png" data-overlay2="http://domain.com/wp-content/themes/xx/images/heros/2-anotherimage.png" /></a>
   </div>

Basically I need to preload the images in data-overlay1 and data-overlay2.

How would I do this?

Answer 1

You can find those URLs and preload them like this:

var preloadImgs = [];
$(document).ready(function() {
    $("#slider img").each(function() {
        var img = new Image();
        img.src = $(this).data("overlay1");
        preloadImgs.push(img);
        img = new Image();
        img.src = $(this).data("overlay2");
        preloadImgs.push(img);
    });
});