gif image loading until page completely loads?

Question

gif image loading until page completely loads?

2.2k Views Asked by uiit At 03 April 2025 at 07:04

I have gif image and I want to load gif image which shows loading website until page completely loads.I try gif image not working well. Gif not animated till web site completely load.Can anyone help me? Here is my code:

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>
  <script type="text/javascript">
    $(window).load(function() {
      $(".loader").fadeOut("slow");
    })
  </script>
  <style type="text/css">
    .loader {
      background: url('image/loading.gif') 50% 50% no-repeat rgb(0, 0, 0);
      background-color: black;
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 999999999999999999999999999999999999999;
      opacity: .7;
    }
  </style>
  <div class="loader">

    <body>
    </body>

And here is my website link a link

Original Q&A

There are 3 best solutions below

**Sangrai** · Answer 1

Here is an alternate.

Add this code a very simple way to add loader on your web page:

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>
  <script>
jQuery(document).ready(function($) {  
$(window).load(function(){
    $('#preloader').fadeOut(5000,function(){$(this).remove();});
});
});
</script>
  <style type="text/css">
    .js div#preloader {position: fixed; left: 0; top: 0; z-index:99999; width: 100%; height: 100%; overflow: visible; background:#fff url('images/loader.gif') no-repeat center center;background-size:60px 60px;}
  </style>
  <div class="loader">
    <div id="preloader"></div> <--USE-THIS-DIV-->
    <body>
    </body>
  </div>
</html>

**Chetan** · Answer 2

Check below code...

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function (e) {
        myVar = setTimeout(showPage, 3000);
    });
    function showPage() {
        document.getElementById("loader").style.display = "none";
        document.getElementById("myDiv").style.display = "block";
    }
</script>
<style type="text/css">
    .loader {
        background: url('loader.gif') 50% 50% no-repeat rgb(0, 0, 0);
        background-color: black;
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 999999999999999999999999999999999999999;
        opacity: .7;
    }
</style>
<body id="myDiv" style="margin:0;">
    <div id="loader" class="loader">&nbsp;</div>
    Hello this is a testing...........
</body>

**adwjo** · Answer 3

Try to show your loader before your window.load function like that :

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

This code should show your loader and when your website is load, the loader should fade out slowly. If you to hide your website background during loading, put an overlay over your website : create a div with "overlay" class with a background and a high z-index, put your loader inside your div and that should work.

gif image loading until page completely loads?

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in IMAGE

Related Questions in ANIMATED-GIF

Trending Questions

Popular # Hahtags

Popular Questions