Jquery img.load 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?

回答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.

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

回答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.

回答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.

来源：https://stackoverflow.com/questions/1114299/jquery-img-load-question

标签

jquery

cycle-plugin