/    Sign up×
Community /Pin to ProfileBookmark

Javascript Prefetching

Copy linkTweet thisAlerts:
May 19.2010

Does anyone have some good tutorials for using javascript to prefetch a .js file for the next page (like if they’re in a category page, prefetch a .js needed for the product view). But i’d only like this to be done after the page is done, so i’m assuming an onload would be required. I’ve search google but found no definitive tutorials or ones that require a library like jquery to do the prefetching (oh the irony). Interestingly enough info on javascript prefetching is pretty scarce.
Thanks in advance.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@svidgenMay 19.2010 — Have you tried just putting the script tags at the [I]bottom[/I] of the document body? This should allow the document to render before the scripts are loaded. It's actually [I]always[/I] recommended to put scripts at the bottom of the document [I]when possible[/I] for this reason.

Though, if this fails to meet your needs, you could always call a function like this from the body's onload event:

[code=html]function preload_scripts() {
var scripts = [
'script1.js',
'script2.js'
];

var temp;

for (var i in scripts) {
temp = document.createElement('script');
temp.type = 'text/javascript';
temp.src = scripts[i];
document.body.appendChild(temp);
}
} // preload_script()[/code]

Though, unless its in conflict with other things on the page, I'd suggest just putting the scripts at the bottom of the page, after any other scripts that you need more immediate access to.
Copy linkTweet thisAlerts:
@rnd_meMay 19.2010 — just add a defer attrib to the script tag, and the page won't wait on it to render.

so, all you have to do is add a script tag (w/defer), linking it to the scrip you want to "preload".
Copy linkTweet thisAlerts:
@svidgenMay 19.2010 — just add a defer attrib to the script tag, and the page won't wait on it to render.

so, all you have to do is add a script tag (w/defer), linking it to the scrip you want to "preload".[/QUOTE]

This is only supported by IE: http://www.w3schools.com/tags/att_script_defer.asp

If I were to assume that recent versions of most browsers are including support for this, which is what I assume you're assuming, I still couldn't recommend it. Outdated browsers still in heavy use.
Copy linkTweet thisAlerts:
@rnd_meMay 20.2010 — This is only supported by IE: http://www.w3schools.com/tags/att_script_defer.asp

If I were to assume that recent versions of most browsers are including support for this, which is what I assume you're assuming, I still couldn't recommend it. Outdated browsers still in heavy use.[/QUOTE]


while it used to be IE only, it works on firefox, et al as well (for several versions now).




even if it didn't work in old operas or whatever, it's not a crucial functionality; it's an enhancement.

if someone has to wait slightly longer because they are using an ancient or obscure browser, i can live with that.


if in doubt, simply do an image ping to cache the file:

[CODE]var i=new Image;
i.src="script2cache.js"
[/CODE]
×

Success!

Help @Jarrod1937 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...