Using Lazy Loading to Speed Page Load

Recently I added some Virtual Earth and Google Maps functionality to one of my sites. This requires loading some hefty JavaScript libraries, which I did in the usual way:

<script type="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script> <script type="http://maps.google.com/maps?file=api&v=2.x&key=holycowlongkeyhere"></script>

This worked, but having to wait for those libraries to load really slowed down my initial page load. Slow things irritate me, and since the VE and Google Maps functions are not needed at page load, I decided to switch to lazy loading those JavaScript Libraries.

Lazy loading simply means only instantiating an object when it is needed. Rather than have the page rendering wait for these libraries, we’re going to load the page and get the libraries later.

Here’s what your lazy loading script for Google Maps will look like:

function LazyLoadGoogleMaps() { var script = document.createElement('script'); script.setAttribute('src', 'http://maps.google.com/maps?file=api&v=2.x&key=bighonkingkey&async=2'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); }

What we're doing here is creating a script object, setting it to the Google Maps API, and appending it to the page. We can call LazyLoadGoogleMaps() on the body onload event, and then our page will display before it bothers going to get the Google Maps JS library.

We can also wait to call this function only when it is needed (a button is clicked or whatnot), but that requires a tad more. If you try to run this function and then run some functions relying on this library, you’ll get an error, as it will still be grabbing the library while your next bit of code runs. The trick is to call the next function only after the library loads by adding a callback function to the script.

script.setAttribute('src', 'http://maps.google.com/maps?file=api&v=2.x&key=bighonkingkey&async=2&callback=' + callback);

Then we can have a callback function that will run after the script is loaded:

function callback() { //Run your Google Maps code here }

Now we're lazy loading some JavaScript.

jQuery has a great plugin for this called On-Demand JavaScript. You can use it in your document ready event like so:

$(document).ready(function(){ $.requireJs('http://maps.google.com/maps?file=api&v=2.x&key=bighonkingkey&async=2'); });

That saves a bit of code. The library also lets you embed your own callback function once the library loads, like this:

$(document).ready(function(){ $.requireJs('http://maps.google.com/maps?file=api&v=2.x&key=bighonkingheky&async=2', function(){ //code to be executed immediately after script loads } ); });

One of the realities with all of these nice interface libraries, whether they be Flash or JavaScript or what have you, is they make you pay a bandwidth penalty for the functionality they provide. Lazy loading is one way to space out the bandwidth requirements for your application so your use doesn't take the brunt of it on the initial page load.