CODEWITHSUNDEEP
javascriptjqueryimageloaded
Francisc
Francisc

Reputation: 80385

jQuery check if image is loaded

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!

Upvotes: 3

Views: 12761

Answers (2)

Ron
Ron

Reputation: 2790

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

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

or

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

Upvotes: 16

Domen Grabec
Domen Grabec

Reputation: 67

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.

Upvotes: 2

Related Questions