How to display a loading screen while site content loads

Question

I m working on a site which contains a whole bunch of mp3s and images  and I d like to display a loading gif while all the content loads    I have no idea how to achieve this  but I do have the animated gif I want to use    Any suggestions

User · Answer

First  set up a loading image in a div  Next  get the div element  Then  set a function that edits the css to make the visibility to  hidden   Now  in the  lt body gt   put the onload to the function name

User · Answer

Typically sites that do this by loading content via ajax and listening to the readystatechanged event to update the DOM with a loading GIF or the content   How are you currently loading your content   The code would be similar to this   function load url           display loading image here        document getElementById  loadingImg   visible   true         request your data        var req   new XMLHttpRequest        req open  POST   url  true        req onreadystatechange   function              if  req readyState    4  amp  amp  req status    200                   content is loaded   hide the gif and display the content                if  req responseText                    document getElementById  content   innerHTML   req responseText                  document getElementById  loadingImg   visible   false                                     request send vars       There are plenty of 3rd party javascript libraries that may make your life easier  but the above is really all you need

User · Answer

You can use  lt progress gt  element in HTML5  See this page for source code and live demo  http   purpledesign in blog super-cool-loading-bar-html5   here is the progress element      lt progress id  progressbar  value  20  max  100  gt  lt  progress gt    this will have the loading value starting from 20  Of course only the element wont suffice  You need to move it as the script loads  For that we need JQuery  Here is a simple JQuery script that starts the progress from 0 to 100 and does something in defined time slot    lt script gt            document  ready function              if  Modernizr meter            alert  Sorry your brower does not support HTML5 progress bar               else            var progressbar       progressbar             max   progressbar attr  max             time    1000 max  10            value   progressbar val            var loading   function             value    1          addValue   progressbar val value               progress-value   html value                 if  value    max            clearInterval animate             Do Something    if  value    16      Do something    if  value    38      Do something   if  value    55      Do something    if  value    72      Do something    if  value    1      Do something    if  value    86      Do something            var animate   setInterval function     loading       time           lt  script gt    Add this to your HTML file    lt div class  demo-wrapper html5-progress-bar  gt   lt div class  progress-bar-wrapper  gt    lt progress id  progressbar  value  0  max  100  gt  lt  progress gt    lt span class  progress-value  gt 0  lt  span gt   lt  div gt    lt  div gt    Hope this will give you a start

User · Answer

You said you didn t want to do this in AJAX   While AJAX is great for this  there is a way to show one DIV while waiting for the entire  lt body gt  to load   It goes something like this    lt html gt     lt head gt       lt style media  screen  type  text css  gt         layer1 class   position  absolute  z-index  1  top  100px  left  0px  visibility  visible           layer2 class   position  absolute  z-index  2  top  10px  left  10px  visibility  hidden        lt  style gt       lt script gt        function downLoad            if  document all               document all  layer1   style visibility  hidden               document all  layer2   style visibility  visible             else if  document getElementById               node   document getElementById  layer1   style visibility  hidden               node   document getElementById  layer2   style visibility  visible                          lt  script gt     lt  head gt     lt body onload  downLoad    gt       lt div id  layer1  class  layer1 class  gt         lt table width  100   gt           lt tr gt             lt td align  center  gt  lt strong gt  lt em gt Please wait while this page is loading    lt  em gt  lt  strong gt  lt  p gt  lt  td gt           lt  tr gt         lt  table gt       lt  div gt       lt div id  layer2  class  layer2 class  gt           lt script type  text javascript  gt                  alert  Just holding things up here   While you are reading this  the body of the page is not loading and the onload event is being delayed             lt  script gt          Final content             lt  div gt     lt  body gt   lt  html gt    The onload event won t fire until all of the page has loaded   So the layer2  lt DIV gt  won t be displayed until the page has finished loading  after which onload will fire

User · Answer

There s actually a pretty easy way to do this  The code should be something like    lt script type  test javascript  gt       function showcontent x          if window XMLHttpRequest            xmlhttp   new XMLHttpRequest            else           xmlhttp   new ActiveXObject  Microsoft XMLHTTP                   xmlhttp onreadystatechange   function             if xmlhttp readyState    1                document getElementById  content   innerHTML     lt img src  loading gif    gt                      if xmlhttp readyState    4  amp  amp  xmlhttp status    200              document getElementById  content   innerHTML   xmlhttp responseText                            xmlhttp open  POST   x   html   true         xmlhttp setRequestHeader  Content-type   application x-www-form-urlencoded          xmlhttp send null            And in the HTML    lt body onload  showcontent main   gt   lt  -- onload optional -- gt   lt div id  content  gt  lt img src  loading gif  gt  lt  div gt   lt  -- leave img out if not onload -- gt   lt  body gt    I did something like that on my page and it works great

User · Answer

Pure css method     Place this at the top of your code  before header tag     x000D   x000D   lt style gt   loader   x000D    position  fixed  x000D    background-color   FFF  x000D    opacity  1  x000D    height  100   x000D    width  100   x000D    top  0  x000D    left  0  x000D    z-index  10  x000D    x000D   lt  style gt  x000D   lt div class  loader  gt  x000D    Your Content For Load Screen x000D   lt  div gt  x000D   x000D   x000D       And This At The Bottom after all other code  except  html tag     x000D   x000D   lt style gt  x000D   loader   x000D      -webkit-animation  load-out 1s  x000D      animation  load-out 1s  x000D      -webkit-animation-fill-mode  forwards  x000D      animation-fill-mode  forwards  x000D    x000D   x000D   -webkit-keyframes load-out   x000D      from   x000D          top  0  x000D          opacity  1  x000D        x000D   x000D      to   x000D          top  100   x000D          opacity  0  x000D        x000D    x000D   x000D   keyframes load-out   x000D      from   x000D          top  0  x000D          opacity  1  x000D        x000D   x000D      to   x000D          top  100   x000D          opacity  0  x000D        x000D    x000D   lt  style gt  x000D   x000D   x000D            This always works for me 100  of the time

User · Answer

First  set up a loading image in a div  Next  get the div element  Then  set a function that edits the css to make the visibility to  hidden   Now  in the  lt body gt   put the onload to the function name

User · Answer

Typically sites that do this by loading content via ajax and listening to the readystatechanged event to update the DOM with a loading GIF or the content   How are you currently loading your content   The code would be similar to this   function load url           display loading image here        document getElementById  loadingImg   visible   true         request your data        var req   new XMLHttpRequest        req open  POST   url  true        req onreadystatechange   function              if  req readyState    4  amp  amp  req status    200                   content is loaded   hide the gif and display the content                if  req responseText                    document getElementById  content   innerHTML   req responseText                  document getElementById  loadingImg   visible   false                                     request send vars       There are plenty of 3rd party javascript libraries that may make your life easier  but the above is really all you need

User · Answer

There s actually a pretty easy way to do this  The code should be something like    lt script type  test javascript  gt       function showcontent x          if window XMLHttpRequest            xmlhttp   new XMLHttpRequest            else           xmlhttp   new ActiveXObject  Microsoft XMLHTTP                   xmlhttp onreadystatechange   function             if xmlhttp readyState    1                document getElementById  content   innerHTML     lt img src  loading gif    gt                      if xmlhttp readyState    4  amp  amp  xmlhttp status    200              document getElementById  content   innerHTML   xmlhttp responseText                            xmlhttp open  POST   x   html   true         xmlhttp setRequestHeader  Content-type   application x-www-form-urlencoded          xmlhttp send null            And in the HTML    lt body onload  showcontent main   gt   lt  -- onload optional -- gt   lt div id  content  gt  lt img src  loading gif  gt  lt  div gt   lt  -- leave img out if not onload -- gt   lt  body gt    I did something like that on my page and it works great

User · Answer

Typically sites that do this by loading content via ajax and listening to the readystatechanged event to update the DOM with a loading GIF or the content   How are you currently loading your content   The code would be similar to this   function load url           display loading image here        document getElementById  loadingImg   visible   true         request your data        var req   new XMLHttpRequest        req open  POST   url  true        req onreadystatechange   function              if  req readyState    4  amp  amp  req status    200                   content is loaded   hide the gif and display the content                if  req responseText                    document getElementById  content   innerHTML   req responseText                  document getElementById  loadingImg   visible   false                                     request send vars       There are plenty of 3rd party javascript libraries that may make your life easier  but the above is really all you need

User · Answer

How about with jQuery  A simple       window  load function            Do the code in the   s when the window has loaded        loader   fadeOut  fast       Fade out the  loader div       And the HTML      lt div id  loader  gt  lt  div gt    And CSS      loader         width  100         height  100         background-color  white        margin  0      Then in your loader div you would put the GIF  and any text you wanted  and it will fade out once the page has loaded

User · Answer

You can use  lt progress gt  element in HTML5  See this page for source code and live demo  http   purpledesign in blog super-cool-loading-bar-html5   here is the progress element      lt progress id  progressbar  value  20  max  100  gt  lt  progress gt    this will have the loading value starting from 20  Of course only the element wont suffice  You need to move it as the script loads  For that we need JQuery  Here is a simple JQuery script that starts the progress from 0 to 100 and does something in defined time slot    lt script gt            document  ready function              if  Modernizr meter            alert  Sorry your brower does not support HTML5 progress bar               else            var progressbar       progressbar             max   progressbar attr  max             time    1000 max  10            value   progressbar val            var loading   function             value    1          addValue   progressbar val value               progress-value   html value                 if  value    max            clearInterval animate             Do Something    if  value    16      Do something    if  value    38      Do something   if  value    55      Do something    if  value    72      Do something    if  value    1      Do something    if  value    86      Do something            var animate   setInterval function     loading       time           lt  script gt    Add this to your HTML file    lt div class  demo-wrapper html5-progress-bar  gt   lt div class  progress-bar-wrapper  gt    lt progress id  progressbar  value  0  max  100  gt  lt  progress gt    lt span class  progress-value  gt 0  lt  span gt   lt  div gt    lt  div gt    Hope this will give you a start

User · Answer

Typically sites that do this by loading content via ajax and listening to the readystatechanged event to update the DOM with a loading GIF or the content   How are you currently loading your content   The code would be similar to this   function load url           display loading image here        document getElementById  loadingImg   visible   true         request your data        var req   new XMLHttpRequest        req open  POST   url  true        req onreadystatechange   function              if  req readyState    4  amp  amp  req status    200                   content is loaded   hide the gif and display the content                if  req responseText                    document getElementById  content   innerHTML   req responseText                  document getElementById  loadingImg   visible   false                                     request send vars       There are plenty of 3rd party javascript libraries that may make your life easier  but the above is really all you need

User · Answer

You said you didn t want to do this in AJAX   While AJAX is great for this  there is a way to show one DIV while waiting for the entire  lt body gt  to load   It goes something like this    lt html gt     lt head gt       lt style media  screen  type  text css  gt         layer1 class   position  absolute  z-index  1  top  100px  left  0px  visibility  visible           layer2 class   position  absolute  z-index  2  top  10px  left  10px  visibility  hidden        lt  style gt       lt script gt        function downLoad            if  document all               document all  layer1   style visibility  hidden               document all  layer2   style visibility  visible             else if  document getElementById               node   document getElementById  layer1   style visibility  hidden               node   document getElementById  layer2   style visibility  visible                          lt  script gt     lt  head gt     lt body onload  downLoad    gt       lt div id  layer1  class  layer1 class  gt         lt table width  100   gt           lt tr gt             lt td align  center  gt  lt strong gt  lt em gt Please wait while this page is loading    lt  em gt  lt  strong gt  lt  p gt  lt  td gt           lt  tr gt         lt  table gt       lt  div gt       lt div id  layer2  class  layer2 class  gt           lt script type  text javascript  gt                  alert  Just holding things up here   While you are reading this  the body of the page is not loading and the onload event is being delayed             lt  script gt          Final content             lt  div gt     lt  body gt   lt  html gt    The onload event won t fire until all of the page has loaded   So the layer2  lt DIV gt  won t be displayed until the page has finished loading  after which onload will fire

User · Answer

How about with jQuery  A simple       window  load function            Do the code in the   s when the window has loaded        loader   fadeOut  fast       Fade out the  loader div       And the HTML      lt div id  loader  gt  lt  div gt    And CSS      loader         width  100         height  100         background-color  white        margin  0      Then in your loader div you would put the GIF  and any text you wanted  and it will fade out once the page has loaded

User · Answer

Pure css method     Place this at the top of your code  before header tag     x000D   x000D   lt style gt   loader   x000D    position  fixed  x000D    background-color   FFF  x000D    opacity  1  x000D    height  100   x000D    width  100   x000D    top  0  x000D    left  0  x000D    z-index  10  x000D    x000D   lt  style gt  x000D   lt div class  loader  gt  x000D    Your Content For Load Screen x000D   lt  div gt  x000D   x000D   x000D       And This At The Bottom after all other code  except  html tag     x000D   x000D   lt style gt  x000D   loader   x000D      -webkit-animation  load-out 1s  x000D      animation  load-out 1s  x000D      -webkit-animation-fill-mode  forwards  x000D      animation-fill-mode  forwards  x000D    x000D   x000D   -webkit-keyframes load-out   x000D      from   x000D          top  0  x000D          opacity  1  x000D        x000D   x000D      to   x000D          top  100   x000D          opacity  0  x000D        x000D    x000D   x000D   keyframes load-out   x000D      from   x000D          top  0  x000D          opacity  1  x000D        x000D   x000D      to   x000D          top  100   x000D          opacity  0  x000D        x000D    x000D   lt  style gt  x000D   x000D   x000D            This always works for me 100  of the time

[javascript] How to display a loading screen while site content loads

Examples related to javascript

Examples related to html

Examples related to css

Examples related to loading

Examples related to pageload