PDA

View Full Version : "Loading ..." page



soad
3 May 2007, 7:32 AM
Is there a good example of implementing temporary "Loading ..." page that is displayed as long as JavaScript files are being loaded?

tpattison
3 May 2007, 8:40 AM
There are several, in fact take a look at the source for the API & Examples documentation section. That's how I implemented mine. Just a note though make sure you put your script includes for the JS files after the loading div. That little oversight made my life hell for a bit.

Here are some snippets for you to chew on.

CSS Additions - Add to your custom CSS file you include with the page you want the "loading..." msg displayed on.


.loading-indicator {
font-size:8pt;
background-image:url('../images/default/grid/loading.gif');
background-repeat: no-repeat;
background-position:top left;
padding-left:20px;
height:18px;
text-align:left;
}
#loading{
position:absolute;
left:45%;
top:40%;
border:1px solid #5C5C5C;
padding:2px;
background:#eeeeee;
width:250px;
text-align:center;
z-index:20001;
}
#loading .loading-indicator{
border:1px solid #aaaaaa;
background:white;
color:#000000;
font:bold 13px tahoma,arial,helvetica;
padding:10px;
margin:0;
}



HTML Additions - Add these DIVS right below the body tag and above the JS includes


<body scroll="no">
<div id="loading-mask" style="width:100%;height:100%;background:#999999;position:absolute;z-index:20000;left:0;top:0;">&#160;</div>
<div id="loading">
<div class="loading-indicator"><img src="images/default/grid/loading.gif" style="width:16px;height:16px;" align="absmiddle">&#160;Loading Service Dogs of GA...</div>
</div>
<script type="text/javascript" src="includes/yui-utilities.js"></script>
<script type="text/javascript" src="includes/ext-yui-adapter.js"></script>
<script type="text/javascript" src="includes/ext-all.js"></script>
<script type="text/javascript" src="includes/homepage.js"></script>


JS Additions - Add this code snippet to the JS file you will be using to load the EXT stuff for your page


var loading = Ext.get('loading');
var mask = Ext.get('loading-mask');
mask.setOpacity(.8);
mask.shift({
xy:loading.getXY(),
width:loading.getWidth(),
height:loading.getHeight(),
remove:true,
duration:1,
opacity:.3,
easing:'bounceOut',
callback : function(){
loading.fadeOut({duration:.2,remove:true});
}
});


Hope that helps. There are plenty of other examples on the forum you just have to use the search function.

Tim

soad
3 May 2007, 8:33 PM
Thanks for the tip!

I have implemented the code -- works like a charm.

tpattison
4 May 2007, 5:15 AM
No Problem

badgerd
27 May 2007, 8:58 PM
How could I make this work using an animated gif (that does not stop)?

danh2000
27 May 2007, 10:42 PM
How could I make this work using an animated gif (that does not stop)?

By replacing loading.gif with an animated version???

Edit: I've just looked - it already uses an animated gif.

badgerd
29 May 2007, 3:18 PM
By replacing loading.gif with an animated version???

Edit: I've just looked - it already uses an animated gif.

I already have an animated gif in place, but it does not want to "animate" - what would cause the animation to stop?

navidi
7 Jun 2007, 2:20 AM
IE 7 8-|

IE7 -> Tools -> Options Tab -> Advanced Tab -> Multi Media Section -> Play Animations in Webpages

jalal
12 Jun 2007, 11:26 AM
thanks tpattison
work like a charm

badgerd
18 Jun 2007, 7:37 PM
IE 7 8-|

IE7 -> Tools -> Options Tab -> Advanced Tab -> Multi Media Section -> Play Animations in Webpages
Even IE7 -> Tools -> Options Tab -> Advanced Tab -> Multi Media Section -> Play Animations in Webpages option is checked!

Still won't animate :(