I need help with the following code which doesn't work:

var timeoutID=0;
var currentImage=0;//first image is position 0 in arrImages array
var arrImages=[bla bla bla array of image URLs];
function slideShow()
{
   if($('#myImg')plete)//   <------- Here is where it fails as that's UNDEFINED.
   {
      //curentImage is a global var that remebembers the on-screen image array key
      var nextImage=currentImage+1;

      //arrImages is the array of image URLs
      if(nextImage>=arrImages.length){nextImage=0;}

      $('#myImg').attr('src',nextImage);

      clearTimeout(timeoutID);
      //Change image each second after previous image was loaded
      timeoutID=setTimeout("slideShow()",1000);
   }
   else
   {
      $('#myImg').load(slideShow);
   }
}

Basically I want to change the src for #myImg each second, provided that the counter starts after the image loaded.

*I hate the code button in the text editor for Stack Overflow!

I need help with the following code which doesn't work:

var timeoutID=0;
var currentImage=0;//first image is position 0 in arrImages array
var arrImages=[bla bla bla array of image URLs];
function slideShow()
{
   if($('#myImg').complete)//   <------- Here is where it fails as that's UNDEFINED.
   {
      //curentImage is a global var that remebembers the on-screen image array key
      var nextImage=currentImage+1;

      //arrImages is the array of image URLs
      if(nextImage>=arrImages.length){nextImage=0;}

      $('#myImg').attr('src',nextImage);

      clearTimeout(timeoutID);
      //Change image each second after previous image was loaded
      timeoutID=setTimeout("slideShow()",1000);
   }
   else
   {
      $('#myImg').load(slideShow);
   }
}

Basically I want to change the src for #myImg each second, provided that the counter starts after the image loaded.

*I hate the code button in the text editor for Stack Overflow!

• javascript
• jquery
• image
• loaded

• 1 i am assuming you are having issue within IE correct? In IE, img.complete and load most of the time doesn't get fired unless you inject src after attach event. – KJYe.Name Commented Mar 23, 2011 at 13:47
• Haha, maybe! And by that I mean YES. Could you please explain a bit more? – Francisc Commented Mar 24, 2011 at 10:55
• 1 take a look at this blog post. although code snippet is in mootools, but the issue is there. also, read the comments. davidwalsh.name/image-load-event – KJYe.Name Commented Mar 24, 2011 at 13:04
• You should post that as an answer, kjy112. – Francisc Commented Apr 5, 2011 at 10:54

2 Answers 2

'complete' is for native javascript object. so you should get javascript object from jQuery. like,

$('#myImg')[0].complete

or

$('#myImg').get(0).complete

If I remember correctly the image gets the width and height when it gets loaded. So I guess you could check the width if the image. And as long as that is 0 the image is not loaded.