Javascript : Gif Before Image Load

As image loading takes longer time than other elements on a web page, this small piece of code works great for user experience. It displays a gif image, till whole image is loaded.

1
2
3
4
5
6
7
8
9
$(document).ready(function()
{
    $('img').load(function()
    {
//.gif_load is a class for gif loader which will be shown till the image loads
        $('.gif_load').fadeOut(1000);       
        $('img').fadeIn(2000);
    });
});