jquery slide down image on page load

Question

Hi

I'm not experienced with jquery (or java script really), but trying to make an image (img id=mike ...) slide in when a page loads.

After looking through the jquery docs and trying Google queries, I have so far come up with this

  $(document).ready(function() {

$("#mike").load(function () {
      $(this).show("slide", { direction: "up" }, 2000);

});

  });

And applied the CSS display:hidden so it remains hidden until I want it to slide in on page load.

This doesn't seem to work unless I reload the page though.

Hoping someone could help me out with this please :)

Answer 1

.load() isn't triggered if the image is retrieves from cache, depending on the browser, so you need to manually fire the event if the image is complete, like this:

$(function() {
  $("#mike").one('load', function () {
    $(this).show("slide", { direction: "up" }, 2000);
  }).each(function() {
    if(this.complete) $(this).load();
  });
});

The .one() ensures the event only fires once. The .each() loops though each element, only one in this case, and if it's already complete (which it would be if fetched from cache) fires the event to make sure it goes off (if it already fired, the .one() took care of it not sliding in twice).