Question

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 example,
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?

Answer 1

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.