Jquery img.load question

Question

I am using the jQuery cycle plugin to cycle through some images. These images are all contained inside a DIV. I don't want the cycle plugin to run until after all of the images have loaded, or at least the first 4 or 5 so that an image doesn't appear that isn't loaded yet. Is there an easy way of doing this?

I tried adding a class 'lastImg' to the last img in the div and adding a 'load' event to that e.g.

Markup
<div id='cycle'>
  <img src=''/>
  <img src=''/>
  <img src='' class='lastImg'/>
</div>

JQuery
    $('lastImg').load(function(){
      $('#cycle').cycle({..});
    });

This seems okay in Chrome and FF, admittedly it's a little flakey (sometimes it doesn't work, maybe if the image is in the cache?) and not at all in IE (surprise, surprise...).

Any other suggestions on how I can do this?

Answer 1

Markup:

<div id='cycle'>
  <img src='path1' class='preload' />
  <img src='path2' class='preload' />
  <img src='path3' class='preload'/>
</div>

Try this:

var cyclerLoaded = false;
var numberOfPreloaded = 0;

function imageLoaded()
{      
  numberOfPreloaded++;

  if (numberOfPreloaded >= 4 && !cyclerLoaded)
  {
    $('#cycle').cycle({..});
    cyclerLoaded = true;
  }
}

$(document).ready(function()
{      

  $('img.preload').each(function()
  {
    // Get image instance.
    var image = new Image();
    image.src = $(this).attr('src');

    if (image.complete)        
      imageLoaded();        
    else        
      image.onload = imageLoaded;

  });

});

...where the preload class is attached to all images you want to preload.

Answer 2

Why not hookup the cycle plugin in document's load event? Document's load event fires when all the artificats have been downloaded. [ready event fires when DOM is available.]

Try

$(document).load(function() { //your cycle plugin hookup } );

Answer 3

A better way will be to write a function to preload sufficient number of images and then call cycle function. Because how, when and in what order the images in page are loaded may vary by browser or other circumstances.

Here is a great little function at ajaxian that preload all images available in even the stylesheets referenced in page.

Answer 4

One thing that's wrong in your code is you are using $('lastImg'), but it should be $('.lastImg').

Thus, your code will never run at all.