In the rush to develop whiz-bang AJAX-ified applications for the web, developers often simply choose to ignore the myriad problems arising from trying to use modern Javascript libraries in older or otherwise limited browser contexts, such as those for mobile devices. For example, simply including a script tag pointing to a library like Prototype, can generate error messages in any version of Internet Explorer 5 and under or versions of Netscape Navigator.
Lets assume you do care to make your application usable by as many browser contexts as possible and you don’t want to have simply loading external scripts generating errors. What’s a developer to do?
I wrote a tool called Loader.js which attempts to take care of this problem by essentially offloading the responsibility of external script loading to AJAX itself, and if the browser doesn’t support this, it simply doesn’t try. That means if your browser isn’t going to be able to parse prototype.js, it won’t even bother requesting it from the server! Win win!
How does it do this? Well instead of having <script> tags do the referencing, Loader.js looks for <link> tags. After all, <link> tags are meant to refer to external assets, so they do a good job turning this:
<script type="text/javascript" src="/prototype.js"></script>
<script type="text/javascript" src="/mywidgets.js"></script>
into this, which is just as reasonable:
<link rel="script" type="text/javascript" href="/prototype.js" />
<link rel="script" type="text/javascript" href="/mywidgets.js" />
Just be sure to include a script tag referencing loader.js after all the link tags are defined in the <html><head> area of your document:
<script type="text/javascript" src="/loader.js"></script>
Anyways thats pretty much it. Its a pretty simple library. At some point I think I’d like to give it more functionality to allow selective loading of different scripts depending on the browsers etc, perhaps making more constructive use of the rel attribute of the link tag, but for now I’m keeping it simple.
If you use Loader.js, just change all your other <script> tags to <link> tags with rel="script" and type="text/javascript" and you’re in the money. In fact, we use it on this website!
Now the caveats are that Loader.js is running asynchronously with your document load, so this means they are effectively defer-ed. This is usually not a problem, unless you have some inline script somewhere in your document that expects the libraries to be available already.
But that would mean you’re not writing unobtrusive Javascript… and you’re not doing that, are you?
Just direct your svn co or svn export or piston import or whatever you want to use this URL in our public Subversion repository to get the latest distribution copy.
http://usergenic.com/svn/public/javascript/loader/trunk