start to preload content after a complete page load

i am trying to make the preloading work in such a way that the components i wish to preload start to load after successfully loading the page.

for exam开发者_如何转开发ple, i have index.php. i want it to load up completely. as soon as it loads up i want to start loading the other components.

to make things clear. i have a nav that makes use of large size images. if i load them along with the index.php file, it would increase load up time of the page. i wish for those large images to load after completely rendering index.php?

am i making sense? is it possible?

---

Just attach your preloading function to the window object's 'load' event. Load fires after the page (and all external resources) are completely loaded.

This is different from the "DOMReady" event that various libraries like JQuery provide (as in Ivo's answer). $(document).ready(fn) will fire off once the DOM is ready (meaning the complete http document has been received/parsed) but does not wait for external resources (images, css, etc) to download.

Instead, you want $(window).load():

<script type="text/javascript">
preLoadStuff = function(){
   //code that does preloading goes here
}

$(window).load(preLoadStuff);
</script>

That will trigger your preLoadStuff handler after all images, etc, are completely loaded.

---

The images are loaded almost in parallel to the PHP program execution. That is actually depends on the time it takes to execute your PHP program, the speed transfer of the data that you output to the browser etc.
You shouldn't try to load those images after processing index.php, that wouldn't help, because that your server is the one who process the PHP script, while the browser is the one who should fetch the images.

Having your PHP program to output the image tags as soon as possible is good and improves user experience.

---

I don't think you understand how a webpage works. The index.php file will execute everything it needs before any HTML output even begins processing, which takes mere milliseconds. Then HTML will begin to load everything in the order it appears on the page. The page doesn't wait for the images to finish loading before it displays anything. It will display the outline of the page as it has been loaded so far and as the images finish loading simply insert them into the correct place. It sounds to me like what you want is already the way things work.

---

$(document).ready(function() { YOUR CODE HERE });

http://api.jquery.com/ready/