Wednesday, 23 January 2013

Wait until all images have loaded then fade in - jQuery

I'll be showing you a very easy way of having all your images hidden, and then fading in nicely when they have loaded, which gives a nicer effect than seeing them trace down the page or depixelate into an image...

Place this in your head just before the closing tag.. 

<script src="//"></script>
<script type="text/javascript">
$(document).ready(function(e) {
 $('img').css('opacity',0); // hide all images
$(window).load(function() { // we use $(window).load because unlike $(document).ready, it isn't triggered until the client has finished loading completely.
 $('img').animate({'opacity':1},800); // everything is loaded, fade images in

1 comment:

  1. what about maintaining the image size before the image loads so that the window doesn't shutter when the image loads?