Display Loading Image while Page Loads Using jQuery and CSS

Display Loading Image While Page Loads Using jQuery and CSS

by

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.

Also read:

Dynamic Content Load Using jQuery and AJAX in PHP

Dynamic Dependent Select Box Using jQuery,Ajax and PHP

Let’s learn.

Table of Contents

HTML

Put this script just after body opening tag <body>

<div id="loader"></div>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(window).load(function () {
    $("#loader").fadeOut(1500);
});
</script>

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.

View Demo

Leave a Comment