I have a page with 10 images in and I want to fade them in one after another once the image has been downloaded. how can I detect the image is loaded and ready to be displayed? and should I loop through the loaded images fadeIn and once fadedIn wait for the next to load?
A:
You can preload the images maybe (See here) and then call the the fadein and fadeout methods sequentially in a loop.
maxpower47
2009-08-18 15:16:51
got the preload part working but i dont want to fade the image in until I know its been preloaded?
monkeylee
2009-08-18 15:22:36
You can use the onLoad event of the image object you just loaded like so: objImage.onLoad=imagesLoaded();. The imagesLoaded function is called after the image is loaded. Put your fadein fadeout stuff in there.
maxpower47
2009-08-18 16:00:15
+1
A:
Just use the load() event on an image. E.g.
$('#some_image').hide()
.load(function () {
$(this).fadeIn();
})
.attr('src', 'images/headshot.jpg')
Kris Erickson
2009-08-18 15:21:21
so will the load function only execute when the image has fully downloaded?
monkeylee
2009-08-18 15:27:02
You can see it in action here: http://jsbin.com/ejesu/edit (for as long as jsbin keeps the snippet).
Kris Erickson
2009-08-18 17:06:36