Is it possible to preload all page contents (like showing a loading bar / animated gif.. or loading text.. ) until the contents are fully loaded and then displayed to the user/visitor ? If this is possible, can you give me just directions or resources to follow to achieve this. Because I was able to find image preloaders easily, but I am seeking for a preloading technique that will preload all content on the page before being displayed.
+2
A:
I did something where I needed to know when an image was fully loaded, so I did the preloading with $.get() function and passed a callback function as the last parameter. This way, when the image was actually downloaded, my callback would fire and I would know that the browser already had the image in cache.
You can write a function that will increment a global variable for each image you tell it to preload, and then your callback can decrement the counter. When the counter is back to zero, call another function. This function now will fire once all images are preloaded.
This is for the images. Everything else can be guaranteed to be loaded when $(document).ready() is fired. So, if you begin your routine at this point, everything on the page should be loaded.
Rich
2009-04-08 02:24:41
+8
A:
There's no need to use Ajax or something, simply set the page's wrapper div display to none. then change it to block when the document is loaded. the code might be like this, using raw Javascript:
...
<script type="text/javascript">
function preloader(){
document.getElementById("preloader").style.display = "none";
document.getElementById("container").style.display = "block";
}//preloader
window.onload = preloader;
</script>
<style>
...
div[id="wrapper"]{
...
display: none;
}
div[id="preloader"]{
top: 0; right: 10px;
position:absolute;
z-index:1000;
width: 132px; height: 38px;
background: url(path/to/preloaderBg.png) no-repeat;
cursor: wait;
text-shadow: 0px 1px 0px #fefefe; //webkit
}
...
</style>
...
<body>
<div id="preloader">Loading... Please Wait.</div>
<div id="wrapper">
<!-- page contents goes here -->
</div>
</body>
...
feel free to comment, if you need this in jQuery.
update, in jQuery:
...
<script type="text/javascript">
//use $(window).load(fn) if you need to load "all" page content including images, frames, etc.
$(document).ready(function(){
$("#preloader")[0].css("display","none");
$("#container")[0].css("display","block");
});
</script>
...
Related documents: Events/ready, Events/load, CSS/css & Core/$
Sepehr Lajevardi
2009-04-08 03:06:27
div[id="x"]? Surely just #x?
bobince
2009-04-08 09:09:20
This did the trick. And it's simple. If you have the time, please do write a jQuery version; although this works well.
Ahmad Fouad
2009-04-08 12:21:55
@bobince Sure the same! so why? StackOverflow considers the statements with preceding # characters as a comment in a code block. simply use that #x.
Sepehr Lajevardi
2009-04-10 21:59:09
I'll update the answer containing the jQuery code asap ;)
Sepehr Lajevardi
2009-04-10 22:00:11
+3
A:
If you choose a method where the content is hidden until the whole page is loaded, don't have it initially hidden in CSS then unhidden in JavaScript. If you do that, anyone with JavaScript disabled or unavailable will get no page at all. Instead, do both the hiding and the showing from script.
<body>
<script type="text/javascript">
document.body.style.visibility= 'hidden';
window.onload= function() { document.body.style.visibility= 'visible'; };
</script>
Also note that the term ‘preloader’ isn't really right for what you're doing here. ‘pre’ implies that you're increasing performance by having the page fetched and cached so that it's ready to go by the time it's needed.
But actually this is the opposite: it decreases performance by waiting around showing the user nothing whilst the page is loading, when partial content is available. Defeating progressive rendering makes browsing slower, not faster. It is usually distinctly the Wrong Thing, and except in a few niche cases going with the normal browser progressive rendering is best. This is how the web works; people are used to it by now.
(People, that is, except for the kind of dim-witted management types who don't really use or understand the web but demand that their company's site appears all at once.)
bobince
2009-04-08 09:28:08