3

I'm currently developing a mobile website which is heavy on the images, css and javascript (it uses a library which is 150KB uncompressed for example). I've constructed a preloader for the images which works rather nicely:

function loadImages(images){ var sum = 0; for(i in images){ sum += images[i][1]; // file size } setMaxProgress(sum); for(i in imageArray){ var img = new Image(); img.onload = function(){ addProgress(imageArray[i][1]); }; img.src = imageArray[i][0]; } }

However I would now like to do something similar for the javascript and css, but there are a lot less resources available to do that. The only way I've found is to document.write() the html tags after the document is loaded but this doesn't hive me a (reliable) indication of when the files are loaded.

Is there a way to do this while I can still measure progress?

BTW: I use this as an addition to normale optimizing techniques like minifying js/css, gzipping, css sprites and proper cache control, not as a replacement. Users can skip loading and the site works perfectly fine then, albeit less smoothly

Improve this question

5 Answers 5

Reset to default
2

If you need to know when JS is loaded use the following loadScript function. You might be able to do similarly for CSS, but I haven't tried it:

function preload(src, callback, node) { var script, ready, where; where = node || document.body; ready = false; script = where.ownerDocument.createElement('script'); script.src = src; script.onload=script.onreadystatechange=function(){ if ( !ready && ( !this.readyState || this.readyState == 'complete' ) ) { ready = true; callback(); script.parentNode.removeChild(script); } }; where.appendChild(script); }

I've updated the function, and tested it in firefox. It works for both js and css (some cross-browser checking is required for css.

I'd also like to add a bit more information as to why you'd use the script element to preload css instead of a link element.

When the page is being loaded, resources that affect the structure of the DOM need to be analyzed and inserted in the order that they appear. Script elements need to be executed in the context of the partially loaded DOM so that they affect only existing DOM nodes.

Stylesheets included via link elements don't change the DOM (ignoring possible javascript insertion via url). It doesn't matter if the stylesheet is loaded before during or after the DOM tree is parsed, so there's no necessary callback as to when the resource is loaded. If a script element is used to link to a stylesheet, the external resource still needs to be loaded before the javascript interpreter can decide whether to perform any actions, or whether it should crash with an exception.

If you preload each script in the context of a hidden iframe, you can contain all the errors to a separate context without crashing javascript running on the page.

One word of caution: external scripts that perform functions will still have a chance to execute before being removed. If the script is performing ajax polling or similarly unnecessary actions, consider not pre-loading that particular script.

You may be able to get around this using 'loaded' in the place of 'complete', however there are some older browsers that only support onload, so for those browsers the scripts would still be executed. Pre-loading is really meant to be used for library components that need to be called on various different pages.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Your findings correlate with mine. It works perfectly for JS, but doesn't call the callback for CSS (it does load them though). While listing the scripts I indeed realised it is unwise to preload action-performing script files (as opposed to those only containing functions etc.) but thankfully out I habit I seperate those types of files. I have comfirmed it to work in Chrome 12 and Firefox 4, but am having problems in IE9, this could be because other parts of my scripts though
1

"The only way I've found is to document.write() the html tags after the document is loaded but this doesn't hive me a (reliable) indication of when the files are loaded"

You could append script elements i.e in your head tag and attach handlers to the onload or onreadystatechange 'events' to have an indication of when the files are loaded.

Following url explains some things in detail:

http://unixpapa.com/js/dyna.html

Improve this answer

4 Comments

Good thinking, too bad neither the <script> tag or <link> tag support the onload or related events. (source: w3schools.com/tags/tag_script.asp). Browsers might support this, but it definitely isn't standard
After reading the link again (because of @zzzzBov's answer) the link does answer the question (in the same way as zzzzBov) but which much less clarity, so I'm accepting zzzzBov's answer.
@zzzzBov I didn't know that. Still it is a least a comprehensive overview site but I'll refrain from linking there
Ignore my comment about non-standardness. Together with the HTML5 async feature on scripts it now has an standard onload event
0

After the question was answered I came onto the following: in HTML5 the tag now has an async option and recently major browsers also began to implement the defer attribute (it has been in IE for a long time). You can also place the scripts on the bottom of your body.

These allow you to defer loading/execution of the script until after the page has loaded and thus effectively get the desired behaviour.

HTML5 also defines the onload property for script elements (tags) which is probably what makes the

Improve this answer

Comments

0

I did it this Way:

$('<link/>', { rel:'stylesheet', type:'text/css', href: => path goes here <=, media:'all' }).appendTo('head');

Just enter your path there.

voilà.

(works perfect for me)

[edit] of course, you need Jquery

Improve this answer

Comments

0

An $import.js is a tiny utility, that allows to control js/css/less files loading to the document when only it's necessary.

Usage example:

$import("script.js", "style.css", "[:js]script.php", function(files){ console.log(files); });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.