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
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
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.
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
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>
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.
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 .
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/