Advanced Search

Moving Page Loader Text Message

/ Published in: JavaScript
Save to your folder(s)
Using image to display page loading message count an extra dns request.
making moving text message with javascript increases performance of page loader

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <html>
  2. <title>Simple Page Loader</title>
  3. <head>
  4. <script>
  5.  
  6. var setCnt=3;//number of extra characters
  7. var currentCnt=0;//
  8. var ctxt;
  9. var settimer;
  10. var extraTxt='.';
  11. var originalTxt='Loading';
  12. function loadtext(txt){
  13. if(currentCnt<setCnt){
  14.  
  15.  
  16. document.getElementById('msg').innerHTML=txt+extraTxt;
  17. ctxt=document.getElementById('msg').innerHTML;
  18. currentCnt++;
  19. settimer= setTimeout("loadtext(ctxt)",200);
  20. }
  21. else{
  22. document.getElementById('msg').innerHTML=originalTxt;
  23. ctxt=document.getElementById('msg').innerHTML;
  24. currentCnt=0;
  25. settimer= setTimeout("loadtext(ctxt)",200);
  26. }
  27. }
  28.  
  29. </script>
  30. </head>
  31. <body>
  32. <span id='msg'>
  33.  
  34. 	Loading.
  35.  
  36. </span>
  37.  
  38.  
  39.  
  40. <script>
  41. //call function
  42. loadtext(originalTxt);
  43. //in live environment uncomment below code  and comment setTimeout code
  44. //window.onload=document.getElementById('msg').style.display='none';
  45.  
  46. //to test on fast loading page use a below delay and uncomment below code  and comment above code
  47. setTimeout("document.getElementById('msg').style.display='none'",5000);
  48.  
  49. window.unload="document.getElementById('msg').style.display='block';loadtext(originalTxt)";
  50. //prevent unwanted processing of javascript after 6 sec
  51. setTimeout("clearTimeout(settimer);",6000);
  52.  
  53.  
  54.  
  55. </script>
  56.  
  57. </body>
  58. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.