Wait for the image!
This is common task. You’d like to load an image and then show it. With jQuery that is simple enough. Let’s assume this code:
<img src="image.jpg" /> <div>displayed after the image is loaded</div>
This is OK if the div is hidden with jQuery you can show it with adding this code in your javascript:
<script> $('img').load(function() { $('div').show(); }); </script>
Related posts:
Thanks I am going to check it out!
stoimen, thanks for the article, it’s kinda strange this technique
Nice shot, many thanx
very good
Nice example, exactly wat i was serching about
thx fo sharing ,,, (-:
Extending this technique you can make a “loading” image appear while the image is loading, and then switch in the image after it has loaded:
var $image = $(”).css({ display: ‘none’ }).attr({
src: ‘path/to/image.png’,
alt: ‘description of image’
});
var $loader = $(”).attr({
src: ‘path/to/loader.gif’
});
$(this).append($loader).append($image.load(function() {
$loader.remove();
$image.css({ display: ‘inline-block’ });
}));
Or you could use ‘inline’ or ‘block’ for the final display property of the image, whatever matches your requirements.
Hi Author,
The code which you have shared is not working for me. I want when one image is loaded I need to showcase another image depending on the previous image loaded.
Hope this is the correct plugin: http://github.com/peol/jquery.imgloaded/blob/master/ahpi.imgload.js
Thanks,
Vivek [Founder of DeveloperSnippets.com]
This seems to be a different use case, isn’t it? You’d like to load an image only after another image is loaded?
This method does not work in opera 10 or IE.
@Stoimen:
Yes! you are right! this is another scenario but could you please help me on the same.
Thanks,
Vivek
@Weee: you are almost right. I had an issue with IE that when loading multiple images on the same time not all of them call the load event. Strange but I could not reproduce it with single image.
Howsoever the method is very useful and after some testing you can see is it working in your case or not.
This works fine (IE,Chrome,Firefox) but not Safari. arghh!
this — is $(image) in this case (cuted from my code):
Works in safari, firefox, opera. No bugs with cached images.
This solution to Safari document ready bug:
Nice article, but the title is pretty misleading. You confuse “check whether” with “wait until”.
Which is not just nit-picking, as in most cases you would need _both_ things.
It’s not working for me too. I am using latest jquery.
@Weee: thanks for that. Works like charme!
I’ve got a plugin to handle this sort of stuff.
It’s called waitForImages.
@Alex – thanx!
@Alex,
Great plug-in. With a little tweaking it performed exactly as I needed it to. Kudos!
Worked perfectly. Thanks!
Albeit not in IE.
The cross browser drawbacks of using .load() are already listed here: http://api.jquery.com/load-event/
the Code from Wee is very Simple and powerful
i appreciate.
thank you