CODEWITHSUNDEEP
jquery
Fraser
Fraser

Reputation: 14246

jQuery. Preload images who's src is in a data attribute of another image

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?

Upvotes: 1

Views: 1207

Answers (2)

Ghassan Elias
Ghassan Elias

Reputation: 2233

$('#slider img').each(function(index, element) {
    $('<img/>')[0].src = $(element).attr('data-overlay1');
    $('<img/>')[0].src = $(element).attr('data-overlay2');
});

Upvotes: 2

jfriend00
jfriend00

Reputation: 707326

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);
    });
});

Upvotes: 3

Related Questions