Page Loader in html page

Question

I am trying to show a loader GIF image in the div section of this html page. But I can't get it to work. The div content is hidden and the GIF image disappears.

CSS:

.loader {
    background-image: url(image/Preloader_8.gif);
    background-repeat: no-repeat;
    height:100px;
    width:200px;
}

JavaScript:

<script type="text/javascript">
    $(window).load(function() {
        $(".loader").fadeOut("slow");
    })
</script>

Html:

<body>
    <div class="loader">
        Loading Image
    </div>
</body>

Nothing wrong with the code. Are you sure, you have added reference to jQuery library? — Satpal, Oct 23 '15 at 06:39
You have requested to fadeOut the loader class. So it disappears on loading. What you are trying to accomplish? — Thamilhan, Oct 23 '15 at 06:40
I am trying to load div content which is dynamic and fetch from data base with providing a loading message to user with gif loader.. when div content will loaded, gif image will disappears. — user3580570, Oct 23 '15 at 06:46
Might be off-topic, but the window `load event` doesn't not take asynchronous calls (AJAX, REST) into account. There is a nice [utility called PACE](http://github.hubspot.com/pace/docs/welcome/) which takes care of all. Just include and done... — R. Oosterholt, Oct 23 '15 at 07:02
first check the alert('show me'); message in page load to check jquery li working if yes then display the loader.gif directly on page — Nazir Ullah, Oct 23 '15 at 07:27

score 3 · Accepted Answer · answered Oct 23 '15 at 07:14

Are you using AJAX to fetch the content in div or simply .load function?

In case of .load() jQuery event,

$( ".loader" ).load( "test.html", function() { 
  $(".loader").fadeOut("slow"); 
});

In case of AJAX request, call the function loader in success event of AJAX call.

function loader() {
    $(".loader").fadeOut("slow");
});

rakesh · Answer 2 · 2015-10-23T07:00:12.823

2

In your code, the loader class is assigned to the div section, so when you trigger the fade out of the loader page, the entire div assigned to the class fade's out. So better have internal div to which the loader is assigned. This may help check out

<body>
  <div class="Image">
     <div class="loader">   
       Loading Image
     </div>
  </div>
</body>

Working example here

edited Oct 23 '15 at 07:00

answered Oct 23 '15 at 06:45

rakesh

71
1
5

can you share the code ? if you see the gif loading and then the div containing is disappeared means, use two divs as mentioned before. else if your loading content via ajax add the fadeout in succes handler – rakesh Oct 23 '15 at 07:08
Thanks for comment. I am using ajax content in div. that will fetch from database. .. – user3580570 Oct 23 '15 at 07:11
then its simple, before the ajax call load the image and in the success handler just put $(".loader").fadeOut("slow"); remember to have the loader div inside the content div. – rakesh Oct 23 '15 at 07:14

score 2 · Answer 3 · answered Oct 23 '15 at 06:57

HTML

    <body>
      <div class="loader" style="display:none">
             Loading Image
      </div>
    </body>

js

$(window).load(function() {
    $(".loader").fadeOut("slow");
})

Please add the following script on the top of your web page

$(".loader").fadeIn();

Add loading div on top of just above script

score 2 · Answer 4 · answered Oct 23 '15 at 06:57

I think the reason why your code:

$(window).load(function() {
        $(".loader").fadeOut("slow");
    })

didn't work is because the script is executed after the document is fully loaded.

Following code works.

if (document.readyState == 'complete') {
    $(".loader").fadeOut("slow");
} else {
    $(window).load(function () {
        $(".loader").fadeOut("slow");
    })
}

jsfiddle

score 2 · Answer 5 · edited Feb 10 '16 at 21:22

The simplest way of showing loader.gif on web page as:

<div id="divloader" class="ShowLoader">
    <img id="imgUpdateProgress" class="loaderIMG" src="../../images/newloader.gif" alt="Loading ..." title="Loading ..." />
</div>

CSS code

<style>

.loaderIMG {
    padding: 10px;
    position: fixed;
    top: 45%;
    left: 45%;
    width: 80px;
}

.HideLoader {
    display: none;
}
</style>

jQuery code:

 $(document).ready(function () {
            $("#divloader").addClass("HideLoader");
        });

First check that your jQuery library working or not by showing alert msg, and then check that image path from browser inspect element.

score 1 · Answer 6 · edited Oct 23 '15 at 06:38

1

Add this code:

$(document).ready(function(){
    $(".loader").fadeOut("slow");
})

jsfiddle

edited Oct 23 '15 at 06:38

Joakim Johansson

3,196
1
27
43

answered Oct 23 '15 at 06:36

rifa_at_so

326
1
6
18

Page Loader in html page

6 Answers6