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="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></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
});
</script>