3

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!

Francisc
  • 77,430
  • 63
  • 180
  • 276
  • 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 Mar 23 '11 at 13:47
  • Haha, maybe! And by that I mean YES. Could you please explain a bit more? – Francisc Mar 24 '11 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. http://davidwalsh.name/image-load-event – KJYe.Name Mar 24 '11 at 13:04
  • You should post that as an answer, kjy112. – Francisc Apr 05 '11 at 10:54

2 Answers2

16

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

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

or

$('#myImg').get(0).complete
Sang
  • 2,790
  • 2
  • 20
  • 17
2

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.

Domen Grabec
  • 67
  • 2
  • Hi, Domen. That's a good tip, only I am using the same image container to load images sequentially. So once the fist image is loaded it will always have width and height I think. Even if I change the src programatically. – Francisc Apr 05 '11 at 11:54
  • 1
    @Domen What about browsers that sets a default loading image? Also what about browsers that doesn't load the image completely (show up blurred while loading). – Omar Abid Dec 05 '12 at 21:23