jquery - Pre-loading external files (CSS, JavaScript) for other pages

Question

I'm curious if there is an efficient way to wait for the front page of a site to load, and then pre-load CSS and script files that I know will likely be needed for the other pages on the site.

I want the front page of the site to be as fast as possible (lean and mean). It's likely that the user will not immediately click on a link. Since there will likely be some idle time, this seems like an opportune time to pre-load some of the external assets. Pre-loading should cause them to become cached. When the user does click on another page, the only request needed will be for the content and possibly some images, etc.

Has anyone done this? Is it a bad idea? Is there an elegant way to implement it?

Answer 1

That's an interesting idea, I'm not sure if it could be done via Javascript (at least the CSS part).

You might place an IFRAME on the page with the other resources you want to load, but put some CSS on it to hide it...

.preload {
    position : absolute;
    top      : -9999px;
    height   : 1px;
    width    : 1px;
    overflow : hidden;
}

If you put this at the end of the page then I would think it would load after the rest of the page. If not then you could use some Javascript and setTimeout to actually create the IFRAME after the page loads.