How to go about late/lazy loading resources

Question

Hi folks,

I have a fairly long page (http://tiny.cc/JrSYr) 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've seen http://www.appelsiini.net/projects/lazyload and was wondering if anyone has used a similar approach or any other that allows these items load once everything else is completed and in some cases not till the user scrolls the item into view?

Cheers, Denis

Answer 1

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.

Answer 2

Ok so what I'm looking at doing is using http://labjs.com/ for the js resouscres 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.