Start preloading content after page has fully loaded
I am trying to preload in such a way that the components I want to preload start loading after the page has loaded successfully.
for example, I have index.php. i want it to boot completely. as soon as it loads, I want to start loading other components.
to make everything clear. I have a navigator that uses large sized images. if i load them along with index.php file it will increase page load time. I want these large images to load after index.php is fully rendered?
Do I understand the meaning? is it possible?
source to share
Just attach your preload function to the "load" event of the window object. Loading fires after full page load (and all external resources).
This is in contrast to the "DOMReady" event that various libraries like JQuery provide (as in Ivo's answer). $(document).ready(fn)
will be disabled as soon as the DOM is ready (meaning the full http document has been fetched / parsed), but does not wait for external resources (images, css, etc.) to load.
Instead, you want $(window).load()
:
<script type="text/javascript">
preLoadStuff = function(){
//code that does preloading goes here
}
$(window).load(preLoadStuff);
</script>
This will cause your preLoadStuff handler to be after all images, etc. will be fully loaded.
source to share
The images are loaded almost parallel to the execution of the PHP program. It depends on the time it takes for your PHP program to run, the transfer rate of the data that you output to the browser, etc.
You shouldn't try to load these images after index.php has been processed, which would not help, because your server is the one that processes the PHP script, while the browser is the one that needs to receive the images.
Having your PHP program to output image tags in no time and improve the user experience.
source to share
I don't think you understand how a web page works. The index.php file will do whatever it takes before any HTML output even starts processing, which only takes milliseconds. Then the HTML will start loading everything in the order shown on the page. The page does not wait for the images to finish loading before displaying anything. It will show the outline of the page as it has been loaded so far, and when the images are finished loading, just paste them where you want. It seems to me that what you want is already the way everything works.
source to share