Geek Answers Handbook

Html page loader

I am trying to display a GIF image of a bootloader in the div section of this html page. But I can’t make it work. The contents of the div are 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>
+6
source share
6 answers

Are you using AJAX to retrieve content in a div or just a load function?

In case of .load () jQuery event,

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

For an AJAX request, call the loader function if the AJAX call succeeds.

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

In your code, the loader class is assigned to the div section, so when you start dropping out of the loader page, the entire div assigned to the class disappears. Therefore, it is better to have an internal div to which the loader is assigned. This may help check.

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

Working example here

+2
source

HTML

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

Js

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

Please add the following script at the top of the web page

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

Add a boot div at the top just above the script

+2
source

I think why your code:

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

does not work because the script is executed after the document is fully loaded.

The following code works.

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

jsfiddle

+2
source

The easiest way to show loader.gif on a 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 whether your jQuery library is working or not, showing a msg warning, and then check that the path to it is from a browser validation element.

+2
source

Add this code:

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

jsfiddle

+1
source

More articles:


All Articles