When we build web applications then web page takes time to Load and if there is lots of image ,jquery script and css then it takes more time to load. Mostly website users close webpage when it takes more time to load,in such type of a case we try to optimize web pages to maintain speed. It is great idea to display loading image on page loads, I think it will give good experience to website users.

In this post, we will show you how you can easily show loading image while page loads using jQuery and CSS. Here we are going to show you simple snippet to accomplish display loading image on page loads.

You may also like:

Dynamic Content Load Using jQuery and AJAX in PHP.

Dynamic Dependent Select Box Using jQuery,Ajax and PHP

Let’s learn.

HTML

Put this script just after body opening tag

CSS

#loader
{
    position: fixed;
    z-index: 9999999;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: url('loader.gif') 50% 50% no-repeat #f9f9f9;
}

jQuery

In this process we create two divs first one for loader and another for placing content and then jquery window.load is used to fadeout the Loading image on complete page load. CSS is used to display loading image in center and to hide background at same time. You can increase fade-out time as per your requirement.

The post Display Loading Image While Page Loads Using jQuery and CSS appeared first on PHPCluster.