0

I have been building an image pre loader and have just found that I need to place the image URL in a data attribute on the image tag to stop the images all loading at once.

I have the following HTML:

<div class="slide-item"><img data-url="http://www.domain.com/image.jpg" /></div>
<div class="slide-item"><img data-url="http://www.domain.com/image.jpg" /></div>
<div class="slide-item"><img data-url="http://www.domain.com/image.jpg" /></div>
<div class="slide-item"><img data-url="http://www.domain.com/image.jpg" /></div>
<div class="slide-item"><img data-url="http://www.domain.com/image.jpg" /></div>
<div class="slide-item"><img data-url="http://www.domain.com/image.jpg" /></div>
...

And the following jQuery:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

var imageArray = [];
$('.slide-item img').each(function() {
    var img = $(this).data('url');
    imageArray.push(img); 
});

$([imageArray]).preload();

My aim is to have each image load sequentially, and once its loaded show.

My question is, how do I load the url into the image once its preloaded?

I have tested and found that the 'imageArray' contains the correct image URL's and this is passed over to the 'preload' function, but I can't figure out how to show the image onces its loaded.

ccdavies
  • 1,576
  • 5
  • 19
  • 29
  • Why not iterate through the array of `.slide-item` elements and `.show()` / `.hide()` each as you do? – DevlshOne Sep 05 '14 at 09:45
  • @DevlshOne I am not sure I understand. How would I pre load using this method? – ccdavies Sep 05 '14 at 09:47
  • The preload routine wouldn't change. You state you're simply trying to show each image sequentially after the preload is complete. If this is not the case, please explain your situation more fully. – DevlshOne Sep 05 '14 at 09:56
  • possible duplicate of [Preloading images with jQuery](http://stackoverflow.com/questions/476679/preloading-images-with-jquery) – DevlshOne Sep 05 '14 at 09:57

0 Answers0