I’ve been looking for a javascript loader and as much as I want to use RequireJS, there are two HUGE reasons I cant.
- The project I’m working on has a complex theme with a ton of existing javascript. RequireJS doesn’t really like it when you don’t load everything thru it. I can work around this, but its just sooooo much work.
- The project I’m working on is running on the Shopify platform; its an online store. The way Shopify hosts its assets require query/GET parameters in the request and RequireJS likes its own “special syntax”. You can use absolute URLs, but the parameters are a problem.
I needed a simpler solution that:
- Works with Shopify and its query params. Heck, I don’t want a special syntax, I just want to use a normal url like I would with a plain html script tag; i.e. relative, absolute, etc.
- Takes advantage of loading scripts asynchronisly.
- Gives me the ability to load scripts in levels (or groups) and in an order; i.e. load jQuery.js, md5Util.js, etc. before loading jQueryPlugin1.js, jQueryPlugin2.js, etc., load all of that before loading main.js, mystats.js, etc.
- Can handle an unlimited number of script levels and an unlimited number of scripts.
- Can specify a retry (or fallback) url incase a script fails. If no retry url is provided, retry the original script again.
- Is self-contained and has no dependancies with support for IE8+, Safari, Firefox, Chrome and mobile.
What I created was LevelLoader
LevelLoader is small and sexy. Something you can drop into any project and go. Use it for a single script or 1,000,000. Since its just adding script tags to your HTML, the only requirement is Javascript.
Since it is a loader and to be safe, instead of loading it and taking the risk of it not loading for ANY reason, I highly recommend, you copy it directly into your HTML. More than likely if you’re even thinking about a javascript loader, you’re definitely going to be using templates, so chances are high that you’ve only got to drop this code into a single global footer.
Here’s a link to a demo I created on codepen were you can see it in action.
This demo has three levels and is loading a bunch of scripts. I purposely requested the same pages a few times to prove the browser is smart and will only request the pages it needs, so we’re taking full advantage of the caching you get for free from the browser as well.
During development I found the need to prove things to myself, so theres are debug, showTime, and showStatus options that you can enable and disable as needed. These just control sending message to the webtools console in your browser.
Other options include a timeout amount in seconds which is a per-level setting. That means that by default each level will have 8 seconds to make all its async calls before it considers the level as failed. If you need the setting to be 12 seconds for example, you have that option. Regardless if all requests are successful or fail as long as they all come back before the timeout, the system will move on to the next level by default without waiting the full timeout.
Yet another option is having the ability to specify a callback function which is passed an array of all failed levels and their urls. This is very useful for error logging. You could also for example use this callback to trigger a page reload if important/required files failed to load.
Yet another feature is a function that gets called once the scripts have loaded and the DOM is ready and has a similar syntax to jQuery’s
$(document).ready(function(){ /* your code goes here */ });
