27 May 2010

Jquery gradual loading page

Ever wanted to do a google mail, gmail style gradual loading type page. Where the longer something takes the more messages you get.

So for example something taking ages to load would say:


"still loading....."

"sorry this is taking ages, trying to fix it now...."

gradually, over time. Well i worked that out recently with jquery, it's not rocket science but it's a cute bit of code, made all the easier with jquery. Now before i go on, i'm no javascript expert and definitely i'm no jquery expert. In fact i'm only a few weeks into my jquery life. So if you know a better way about this, then do let me know.

Apologies once again for the poor code sampling, i simply can't work well with google blogger and code samples.

 <script language="javascript" src="jquery.js"></script>
 <title>Jay loadings</title>
  var loadComplete = false;
  //straight away load the loading page
   url: "loading.htm",
   cache: false,
   success: function(html){
    //if thats done and if page still not completed, do a still loading page
    var t1=setTimeout("if(loadComplete == false){$.ajax({url: 'loading2.htm',cache: false,success: function(html){$('#mydiv').html(html);}});}",2000);
    var t1=setTimeout("if(loadComplete == false){$.ajax({url: 'loading3.htm',cache: false,success: function(html){$('#mydiv').html(html);}});}",6000);
  //when target.cfm is ready, load it.
    loadComplete = true;

<div id="mydiv"></div>  


No comments: