Hi there, 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.
A:
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.
SLaks
2010-07-19 02:44:46
+1
A:
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>
shox
2010-07-19 02:48:00
hi there, can you please elaborate? I'm a newbie to jQuery development :( Whats happening is that the image is not displaying during the page loading but rather only after it. I need the image to display during the loading of the page.Thanks!
looking4juice
2010-07-19 03:15:31
i update the replay , just add content and your jquery path instead of `src="jq.js"`
shox
2010-07-19 11:21:30
A:
$.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.
Rodrigo
2010-07-19 04:36:34