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


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.