How to go about late/lazy loading resources

I have a fairly long page with sections such as Google Maps, image slider, Google ads, BrightCove video (optional) and images. Loads nice and quick without JS and a little slower with JS.

I saw this site and was wondering if anyone had used a similar approach or any other that allows these items to load once everything else is completed and in some cases not till the user scrolls the item into view?

Cheers, Deni开发者_开发技巧s

Well as a starting point you could use the jQuery load functionality to load certain bits in which you know will take longer (such as google maps). This is very simple and can be achieved with:

jQuery(function(){
  // Load google map
  jQuery('#map-holder').load('/resources/lazy/map-loader.ext?q=' + an_id);

  // Load similar properties
  jQuery('#similar-properties').load('/resources/lazy/similar-properties.ext?q=' + an_id);
});

And then using the lazy loading plugin, im sure you could just put the above calls in functions and hook them up to the lazy load plugin.

Ok so what I'm looking at doing is using http://labjs.com/ for the js resources I need on the page at startup and then using http://www.codeproject.com/KB/ajax/selfloadelement.aspx as an approach for loading sections that can't be added to the page after the initial load.