views:

135

answers:

6

Hello,

I would like to force my page to load all data before anything is shown...

This is my site: http://vinarakar.si/sl/

I would like do this in php, but I'm open to other suggestion :)

Thanks for helping me

+2  A: 

You need to do this using Javascript, not PHP.

PHP is a serverside language so it cannot change what the user experience is once output has been sent to the browser.

Try something like this, use visibility: hidden of the body to hide it from the start. Then onload() will be fired once the page is loaded (I think) and then set it to visibility: visible

 <body style="visibility:hidden" onload="this.style.visibility = 'visible' ">

A bigger issue here is why oh why! This just means the user has to wait longer to start using your site? It is not a big site, it does not have loads of Js libs that needed to be loaded before the user can start using the site either.

jakenoble
I've never had to do this to the entire page, but i would think `visibility: hidden` would be better here, that way all the positions and intrinsic sizes of the elements are worked out as the page loads - they just aren't shown.
prodigitalson
@prodigitalson good point - answer amended
jakenoble
The issue with this solution is that if the user has JS disabled, then they won't see anything ever. It might be better to have the first element in the body be a contentless DIV with a onload function to set the body's visibility to hidden, then an onload on the body to set everything to visible. The DIV will load before anything else, if the user has JS will hide everything, then when the page's loaded, everything will show.
nhinkle
If you look at the site in the OP's post and disable Js then the whole thing breaks. So I don't think this is really an issue. You would be doing them a favour by hiding all the broken content!
jakenoble
A: 

You actually need CSS, you have to put a full page overlay that hides content (maybe it wil show "loading" to make user aware that the page is loading), then hide that onload so it shoes content beneath. take a look at the solution here

aularon
A: 

Be aware, that using javascript in any manner may not work for every visiter exactly the same. You should use a cross-browser JS engine like jQuery or MooTools.

That way, you can at least try to be cross-browser valid.

Secondly, and because of what I already said, I would not advise you to use the solution jakenoble gave you. If a user has disabled JS for whatsoever reasons, he will never be able to see your page at all.

If you want user that have disabled JS to see your site, you will have to both hide and show your page using JS. Using a full page overlay may be a good approach, but be sure to check your page still works without activated JS.

e.g. you could write a CSS code into a tag that will hide the overlay and display the page if the user has disabled JS.

Some code examples

<body class="body">
 <div class="overlay">
 <!-- Your page content -->
 </div>
</body>

<script type="text/javascript">
 $(document).ready(function(){
  $(".overlay").css("visibility", "hidden");
  $(".body").css("visibility", "visible");
 });
</script>

<noscript>
 <style type="text/css">
  .body { visibility: visible; }
  .overlay { visibility: hidden; }
 </style>
</noscript>
ApoY2k
+3  A: 

Can I give a suggestion you won't like?

If you seriously want your Page to display faster, then cut down on the JavaScript gimmicks. You are including 13 JavaScript files and most time in loading is lost for them to initialize.

More importantly your page is completely broken for users without JavaScript.

RoToRa
Very well put. Politer than most would put it!
jakenoble
The biggest problem here are pictures(1.02 sec to load) and the document (1.20 sec to load)...script only need 670ms...
Wolfy
@Wolfy I wasn't referring to the loading time, but the execution time during initialization.
RoToRa
A: 

You can do this actually by using Ajax actually.

Consider if you have to load index.php just write body tag and call Ajax function on body load and get the Ajax response inside body tag .Using this practice will take twice the time for you page to load .

Wasim
A: 

Short Answer, DON'T DELAY IT

First, I would advise against it. We live in a very fast paced community on the internet. If you take to long to display the website (or the user feels like nothing is happening) they may leave. That would be an adverse affect to what you are trying to accomplish.

Better to ask: How do I speed up page loading for my website?

The better question is How do I speed up my website? Here is some advice that will help you. Follow these guidelines for improved performance. http://developer.yahoo.com/yslow/help/

cdburgess
This advice realy helped me, just a few changes and my site works faster :)Now I will try make it faster :P
Wolfy
Great! Glad to hear. Sometimes we all just need a nudge in the right direction. ;)
cdburgess