Load Javascript Dynamically With Lazy Load

One of the blessings (or plagues) or the “Web 2.0” revolution is heavy use of Javascript. Used properly, Javascript can enhance your user experience to nearly the level of a desktop application. Used poorly, and you’re browser is going to crash and burn. But this post isn’t about using Javascript, it’s about loading it.

You see, a large amount of web developers don’t think about how their web page is loaded. They think that no matter where scripts are included, its going to take the same time to load. Actually, this is true. What we’re after is an apparent decrease in load time. When you include Javascript files at the top of your HTML document, as soon as the browser encounters the Javascript it will load and execute it. The problem here is that loading a Javascript file is a blocking call in most web browsers. What does this mean to you? It means that while the Javascript is loading, the rest of your page isn’t. The apparent page load time has increased.

To get around this problem, some web developers have started including their scripts as the last element in the <body> tag. Done this way, your entire page loads on to the screen before the Javascript starts to load. The apparent page load time as decreased. Yes, the script will still take the same time to download and execute, but now people will see content almost immediately.

But why should you include some Javascript files if you aren’t sure the user is going to make use of them? Enter Lazy Load. Lazy Load allows you to easily include Javascript or CSS files on the fly. This is especially helpful when you have large files that need to be loaded. For instance, a sweet new carousel for your site. It’s probably pretty large, and the user is going to have to wait for it anyways. Using Lazy Load you can decrease your site’s apparent and actual load time. It’s also small (~800 bytes minified), so you won’t need to worry about the footprint. Oh, it’s really easy too…

LazyLoad.js('http://example.com/foo.js', function () {
     alert('foo.js has been loaded');
});

By Jack Slingerland

One reply on “Load Javascript Dynamically With Lazy Load”