show loading icon until the page is load

Question

I wanted to show a loading icon to users until the page elements are fully loaded  How can I do that with javascript and I want to do it with javascript  not jquery   Here is a link how google does it How can I do this  triggering some function on onload event or something like this    I know it will be done somewhat like this or any other ways to do it  Or there is some event for it   UPDATE I did something using display property I hide the body element but and onload of body tag I change its property but where to put the loading icon and add more interactivity

User · Answer

Element making ajax call can call loading targetElementId  method as below to put loading icon in target div and it ll get over written by ajax results when ready  This works great for me    lt div style  display none   gt  lt div id  loading  class  divLoading  gt  lt p gt Loading     lt img src  loading image gif    gt  lt  p gt  lt  div gt  lt  div gt   lt script type  text javascript  gt  function loading id        jQuery       id  html jQuery   loading   html         jQuery       id  show

User · Answer

HTML   lt body gt       lt div id  load  gt  lt  div gt       lt div id  contents  gt            jlkjjlkjlkjlkjlklk      lt  div gt   lt  body gt    JS  document onreadystatechange   function        var state   document readyState   if  state     interactive            document getElementById  contents   style visibility  hidden       else if  state     complete           setTimeout function             document getElementById  interactive             document getElementById  load   style visibility  hidden            document getElementById  contents   style visibility  visible           1000           CSS   load      width 100       height 100       position fixed      z-index 9999      background url  https   www creditmutuel fr cmne fr banques webservices nswr images loading gif   no-repeat center center rgba 0 0 0 0 25      Note   you wont see any loading gif if your page is loaded fast  so use this code on a page with high loading time  and i also recommend to put your js on the bottom of the page   DEMO  http   jsfiddle net 6AcAr  - with timeout only for demo  http   jsfiddle net 47PkH  - no timeout use this for actual page   update  http   jsfiddle net d9ngT

User · Answer

firstly  in your main page use a loading icon  then  delete your  lt  body gt  and   lt  HTML gt  from your main page and replace it by    lt  php include  footer php     gt    in the footer php file type     lt  php      iconPath  myIcon ico     myIcon is the final icon     echo   lt script gt changeIcon  iconPath  lt  script gt       where changeIcon is a javascript function whiwh change your icon      echo   lt  body gt        echo   lt  HTML gt      gt

User · Answer

add  class  loading  in the body tag then use below script with follwing css code  body               -webkit-transition  background-color 1s              transition  background-color 1s                    html  body   min-height  100             body loading               background   333 url  http   code jquery com mobile 1 3 1 images ajax-loader gif   no-repeat 50  50               -webkit-transition  background-color 0              transition  background-color 0              opacity  0              -webkit-transition  opacity 0              transition  opacity 0              Use this code   var body   document getElementsByTagName  body   0   var removeLoading   function         setTimeout function             body className   body className replace  loading               3000      removeLoading      Demo  https   jsfiddle net 0qpuaeph

User · Answer

HTML page   lt div id  overlay  gt   lt img src   lt  php echo base url    gt assest website images loading1 gif  alt  Loading    gt   Loading     lt  div gt    Script    window  load function        PAGE IS FULLY LOADED     FADE OUT YOUR OVERLAYING DIV      overlay   fadeOut

User · Answer

The easiest way to put the loader in the website   HTML    lt div id  loading  gt  lt  div gt    CSS    loading   position  fixed  width  100   height  100vh  background   fff url  images loader gif   no-repeat center center  z-index  9999      JQUERY    lt script gt  jQuery document  ready function         jQuery   loading   fadeOut 3000        lt  script gt

User · Answer

HTML  CSS  JS are all good as given in above answers  However they won t stop user from clicking the loader and visiting page  And if page time is large  it looks broken and defeats the purpose   So in CSS consider adding  pointer-events  none  cursor  default    Also  instead of using gif files  if you are using fontawesome which everybody uses now a days  consider using in your html   lt i class  fa fa-spinner fa-spin  gt

[javascript] show loading icon until the page is load?

Examples related to javascript

Examples related to html

Examples related to css