How can I make the browser wait to display the page until it s fully loaded

Question

I hate how you can actually see webpages load   I think it d be much more appealing to wait until the page is fully loaded and ready to be displayed  including all scripts and images  and then have the browser display it   So I have two questions      How can I do this  I m a total noob to web development  but is this common practice   If not  why    Thanks in advance for your wisdom

User · Answer

While I agree with the others that you should not want it I'll just briefly explain what you can do to make a small difference without going all the way and actually blocking content that is already there -- maybe this will be enough to keep both you and your visitors happy.

The browser starts loading a page and will process externally located css and js later, especially if the place the css/js is linked is at the 'correct' place. (I think the advice is to load js as late as possible, and to use external css that you load in the header). Now if you have some portion of your css and/or js that you would like to be applied as soon as possible simply include that in the page itself. This will be against the advice of performance tools like YSlow but it probably will increase the change of your page showing up like you want it to be shown. Use this only when really needed!

User · Answer

I think this is a really bad idea   Users like to see progress  plain and simple   Keeping the page at one state for a few seconds and then instantly displaying the loaded page will make the user feel like nothing is happening and you are likely to lose visits   One option is to show a loading status on your page while stuff processes in the background  but this is normally reserved for when the site is actually doing processing on user input   http   www webdeveloper com forum showthread php t 180958  The bottom line  you at least need to show some visual activity while the page is loading  and I think having the page load in little pieces at a time is not all that bad  assuming you aren t doing something that seriously slows down page load time

User · Answer

Hope this code will help     lt html gt         lt head gt           lt style type  text css  gt             js  flash  display  none            lt  style gt           lt script type  text javascript  gt            document documentElement className    js            lt  script gt         lt  head gt         lt body gt           lt  -- the rest of your code goes here -- gt            lt script type  text javascript  src   scripts jquery js  gt  lt  script gt           lt script type  text javascript  gt               Stuff to do as soon as the body finishes loading               No need for   document  ready   here           lt  script gt         lt  body gt       lt  html gt

User · Answer

Although this is not always a good idea  you re free to decide if you really want to do that  There are some different ways to do it  and I found a simple example here   http   www reconn us content view 37 47   Probably not the best one  but it should help you develop your own solution  Good luck

User · Answer

Don t use display none  If you do  you will see images resize reposition when you do the show    Use visibility hidden instead and it will lay everything out correctly  but it just won t be visible until you tell it to

User · Answer

Immediately following your  lt body  tag add something like this       lt style gt  body   opacity 0   lt  style gt    And for the very first thing in your  lt head  add something like       lt script gt    window onload   function    setTimeout function   document body style opacity  100    500       lt  script gt    As far as this being good practice or bad depends on your visitors  and the time the wait takes   The question that is stil left open and I am not seeing any answers here is how to be sure the page has stabilized  For example if you are loading fonts the page may reflow a bit until all the fonts are loaded and displayed  I would like to know if there is an event that tells me the page is done rendering

User · Answer

Here s a solution using jQuery    lt script type  text javascript  gt      container   css  opacity   0     window  load function           container   css  opacity   1        lt  script gt    I put this script just after my  lt  body gt  tag  Just replace   container  with a selector for the DOM element s  you want to hide  I tried several variations of this  including  hide    show    and  fadeOut    fadeIn     and just setting the opacity seems to have the fewest ill effects  flicker  changing page height  etc    You can also replace css  opacity   0  with fadeTo 100  1  for a smoother transition   No  fadeIn   won t work  at least not under jQuery 1 3 2    Now the caveats  I implemented the above because I m using TypeKit and there s an annoying flicker when you refresh the page and the fonts take a few hundred milliseconds to load  So I don t want any text to appear on the screen until TypeKit has loaded  But obviously you re in big trouble if you use the code above and something on your page fails to load  There are two obvious ways that it could be improved    A maximum time limit  say  1 second  after which everything appears whether the page is loaded or not Some kind of loading indicator  say  something from http   www ajaxload info     I won t bother implementing the loading indicator here  but the time limit is easy  Just add this to the script above     document  ready function       setTimeout      container   css  opacity   1    1000         So now  worst-case scenario  your page will take an extra second to appear

User · Answer

Also make sure the server buffers the page and does not immediately  while building  stream it to the client browser   Since you have not specified your technology stack    PHP  look into ob start ASP NET  make sure Response BufferOutput   True  it is by default

User · Answer

There is certainly a valid use for this   One is to prevent people from clicking on links causing JavaScript events to occur until all the page elements and JavaScript have loaded     In IE  you could use page transitions which mean the page doesn t display until it s fully loaded    lt meta http-equiv  Page-Enter  content  blendTrans Duration  01     gt   lt meta http-equiv  Page-Exit  content  blendTrans Duration  01     gt    Notice the short duration   It s just enough to make sure the page doesn t display until it s fully loaded   In FireFox and other browsers  the solution I ve used is to create a DIV that is the size of the page and white  then at the very end of the page put in JavaScript that hides it   Another way would be to use jQuery and hide it as well   Not as painless as the IE solution but both work well

User · Answer

I know this is an old thread  but still  Another simple option is this library  http   gayadesign com scripts queryLoader2

User · Answer

obligatory   use jQuery   I ve seen pages that put a black or white div that covers everything on top of the page  then remove it on the document load event  Or you could use  ready in jQuery That being said  it was one of the most anoying web pages I ve ever seen  I would advise against it

User · Answer

in PHP-Fusion Open Source CMS  http   www php-fusion co uk  we do it this way at core -       lt  php         ob start               Your PHP codes here                       gt          YOUR HTML HERE            lt  php           html output   ob get contents            ob end clean            echo  html output        gt    You won t be able to see anything loading one by one  The only loader will be your browser tab spinner  and it just displays everything in an instant after everything is loaded  Give it a try   This method is fully compliant in html files

User · Answer

In addition to Trevor Burnham s answer if you want to deal with disabled javascript and defer css loading  HTML5   lt html class  no-js  gt        lt head gt     lt  head gt        lt body gt            lt header gt     lt  header gt            lt main gt     lt  main gt            lt footer gt     lt  footer gt        lt  body gt    lt  html gt    CSS    at the beginning of the page       js main   js footer           opacity 0           JAVASCRIPT     at the beginning of the page before loading jquery      var h   document querySelector  html         h className           js        h className   h className replace      new RegExp            no-js              g         trim      JQUERY     somewhere at the end of the page after loading jquery            window  load function                     main   css  opacity  1                  footer   css  opacity  1                  RESOURCES   CSS delivery optimization  How to defer css loading  What is the purpose of the HTML  quot no-js quot  class  How to get the  lt html gt  tag HTML with JavaScript   jQuery  How to add remove a class in JavaScript

User · Answer

You could start by having your site s main index page contain only a message saying  Loading   From here you could use ajax to fetch the contents of your next page and embed it into the current one  on completion removing the  Loading  message   You might be able to get away with just including a loading message container at the top of your page which is 100  width height and then removing the said div on load complete   The latter may not work perfectly in both situations and will depends on how the browser renders content   I m not entirely sure if its a good idea  For simple static sites I would say not  However  I have seen a lot of heavy javascript sites lately from design companies that use complex animation and are one page  These sites use a loading message to wait for all scripts html css to be loaded so that the page functions as expected

User · Answer

This is a very bad idea for all of the reasons given  and more  That said  here s how you do it using jQuery    lt body gt   lt div id  msg  style  font-size largest   gt   lt  -- you can set whatever style you want on this -- gt  Loading  please wait     lt  div gt   lt div id  body  style  display none   gt   lt  -- everything else -- gt   lt  div gt   lt script type  text javascript  gt    document  ready function             body   show            msg   hide         lt  script gt   lt  body gt    If the user has JavaScript disabled  they never see the page  If the page never finishes loading  they never see the page  If the page takes too long to load  they may assume something went wrong and just go elsewhere instead of  please wait    ing

User · Answer

You can hide everything using some css    some div     display  none      and then in javascript assign a function to document onload to remove that div   jQuery makes things like this very easy

[javascript] How can I make the browser wait to display the page until it's fully loaded?

Examples related to javascript

Examples related to css

Examples related to web