How do I display an animated image during Page Load using jQuery

问题

I have an ASP.NET page that takes a long time to load due to the loading of multiple user controls. Is there a way where I can show a loading animation using jQuery while the page is loading?

Thanks.

回答1:

simply insert a div as absolute position and style it as you want , when page is loaded hide it ..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="jq.js"></script>
<style>
.boxMid{position:absolute; top:30%; left:40%; width:200px; height:200px; background-color:#fff;
               border:1px solid #333; display:block;}
#mybox{position:absolute; left:0; top:0; width:100%; height:100%; background-color:#666666; opacity:.8; display:block;filter:alpha(opacity=80);}
</style>
</head>

<body>

<div id="mybox" >
    <div class="boxMid">
     Loading, please wait ...
    </div>
</div>
    <div id="loading">loading</div>

    <script type="text/javascript">
    $(document).load(function(){
        $('#mybox').fadeOut();
    });

    </script>

</body>
</html>

回答2:

You don't need jQuery.

You can simply add an <img> tag displaying an animated GIF.
You can find a suitable animated GIF at AJAXLoad.info.

回答3:

To do this, I use BlockUI plugin for jQuery.

回答4:

   $.ajaxSetup({   
      beforeSend:function(){   
         $("#loading").show();   
      },   
      complete:function(){   
         $("#loading").hide();   
   });

This will change your global ajax settings to show/hide #loading object while a ajax is being processed.

来源：https://stackoverflow.com/questions/3278159/how-do-i-display-an-animated-image-during-page-load-using-jquery

标签

ASP.NET

jquery

animation

load