4

I recently found out about load.js, but I can't seem to find any indication of whether or not this is possible... (Note: I can't find a 'load.js' tag..)

I've got load.js successfully loading all my JS files, so I know it works. Has anyone got it working for loading CSS files as well?

Update: remyabel's solution worked perfectly for loading the physical files, but it seems there are a few quirks to this process...

For some reason, the order in which the CSS files are loaded and whether they're all done in one load(file1,file2); or in stages with load(file1).then(file2); seems to affect how the style rules are applied to the markup. I'm going to set up a few test cases on my local machine to try work out how or why this happens, but for now at least the files are being loaded.

Final Note:

Following on from the solution posted below, I've decided to use head.appendChild(script); instead of head.insertBefore(script, head.firstChild); to add the CSS elements to the DOM (still uses the original method for JS files).

This doesn't affect the order in which files are fetched and processed, but it makes Load.js insert my CSS links in the same order they were listed and at the end of the header instead of the beginning.

Improve this question
1
  • 1
    Presumably no, because the documentation makes no mention of it, and specifically talks only about loading JS files. Commented May 4, 2013 at 14:50

1 Answer 1

Reset to default
4

Direct from the source code

   function asyncLoadScript(src) {
        return function (onload, onerror) {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = src;

My suggestion is to modify the script (which doesn't seem to contain much) to mirror the function but for a link tag, rather than a script tag.

to reflect OP's comment

The script is built on top of chain.js so it may be more complicated than expected.

Unless you want something else, I'm pretty sure what I wrote above is what you need to change, so it would look like:

   function asyncLoadScript(src) {
        return function (onload, onerror) {

// Get file extension
var ext = src.split('.').pop();
if (ext == "js")
{
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = src;
} else if (ext == "css")
{
                var script = document.createElement('link');
                script.type = 'text/css';
                script.href = src;
                script.rel = "stylesheet";
}

Theoretically that should work. Make another comment if it doesn't work.

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

3 Comments

I was looking at that code earlier, but unfortunately my JS knowledge is somewhat basic... At the moment I've got a check using .lastIndexOf(src) to search for either .css or .js, and currently I'm trying to work out how to dynamically build the rest, from script.onload = onload; down. Any suggestions would be very welcome... :)
Thanks remyabel, I must admit looking through the code for load.js, a lot of it did go over my head... I'll try your suggestion just now and see what happens.
First off, my apologies for the long delay.. I've had quite a bit on my plate the last few weeks, only got to look into this today. @remyabel, your modification to the asyncLoadScript() function works perfectly, thank you. :) I must admit it looks oh-so-simple when I see the actual code, kinda kicking myself for not being able to work it out from your initial answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.