If you're new here, you may want to subscribe to the RSS feed. Thanks for visiting!

The most recent redesign of Google Sightseeing added many embedded “live” Google Maps blocks to the main homepage, and a column of the latest Street View sights. This certainly makes the content easier to explore, but is detrimental to the page load speed, as each of those maps can take a few seconds to load into the browser.

“Lazy loading” is when you don’t load code or media until it’s required. On webpages, that means not loading content (such as images) that are further down the page until the user scrolls down there (if they do at all). It’s used on some large websites to reduce their server cost, as all those images near the bottom that the user never sees can add up to a lot of bandwidth.

However, we don’t want to lazy load Google Maps for bandwidth concerns (it’s all served by Google remember) but instead to speed up the page load. Each embedded map adds a few seconds to the initial page load, so those maps quickly add up.

There’s also an additional issue which forced me to look into the lazy loading: The iPad (with software v3.2) can’t handle more than a couple of Google Maps on one page. If you try to load 5 or 6 Google Maps API instances (Street Views are worse) then Safari just quits without any explanation. The soon-to-be released v4.2 of the iOS software does fix this, but the experience of having your browser consistently crash is so annoying we had to fix it for everyone.

The first step to lazy loading the maps is to provide a hook for loading and unloading each map individually, rather than launching them all in the <head> of the HTML.

I achieved this using jQuery’s custom events, which we attach to each map and called “loadmap” and “unloadmap”:

Here the “loadmap” function switches the map DIV’s classes, and then does the normal Google Maps API map loading for the DIV in the current context (this). The unload function just clears the contents of the DIV to remove the map, and switches back the class.

So now we can load maps into a particular DIV with the command:

or load all the available maps on the page with:

But we don’t want to be doing any of this until the Google Maps API itself is loaded, so we set a callback on the maps API to kick off the process:

As an additional speedup the Maps API is being loaded asynchronously, so the rest of the page loading doesn’t get held up waiting for the Maps API.

At this point in the process it’s fair to say I’ve not achieved much – all the map instances on the page still load for every user. However, we have added a tidy method for loading individual maps, and can now conditionally load them.

To achieve this conditional loading, we used jquery.inview.js – a small plugin for jQuery that allows you to filter to elements of the DOM that are currently in the viewport1.

Inview keeps a cache of a pre-defined set of elements, and then reports to your callback whenever these elements enter or leave the viewport. This means that we can load up the Google Maps as the user scrolls to them, greatly speeding up the initial page load.

We also unload any “maploaded” DIVs that are no longer in the viewport, preventing the iPad from crashing due to too many map instances. This has a downside of losing any zoom or panning the user has done to the unloaded map, so we may yet limit this functionality to the older iOS software.

At present I’ve only activated the lazy loading for Google Sightseeing visitors who use Webkit or Mozilla-based browsers (IE needs more testing), but please give it a try and let me know what you think.


  1. It’s similar to a more popular plugin we tried called jquery.lazyload.js. However, lazyload is targeted more at loading images, and is currently reported as not working on the iPad. 

#fridaymix at OGN

August 4th, 2010

Here’s the microslot talk on #fridaymix that I gave last month at Oxford Geek Night 18

James Turnbull – #fridaymix from Torchbox on Vimeo.

The talk went down well, and all the Oxford Geeks were very positive, but I’m most proud of the slides I created.

I started by buying blank tapes, new and shrinkwrapped from eBay, for the amazingly-cheap price of just over £10 for 20 blank tapes. I don’t know how old the tapes really are, but they look like they were manufactured just yesterday.

I then designed simple inlays for the various fridaymix themes, and throughly enjoyed slicing them up just like I did many years ago. I hoped to actually record samples of the fridaymix playlists onto the tapes, but was hampered by a lack of any actual tape recording equipment.

However, I did take the blank tapes along to the event, and managed to persuade at least 5 geeks that a blank 60 minute tape was exactly what they needed that evening.

Many thanks to J-P Stacy and co. for organising Geek Night, Matthew for photographing the tapes, Annika for supplying a tape player and Alex for tidying up the images.

Oxford Geek Night 18

July 14th, 2010

I will again be speaking at Oxford’s local geek event, OGN in a week’s time (21st July).

This time I plan to pimp the #fridaymix concept, and hopefully recuit a few more participants from Oxford’s local tech companies.

Review: iBank

January 18th, 2010

I’ve been trying out various accounting software for Mac OS X, and today will be reviewing iBank, which promises my finances “will never look so good”. Rather than covering the softwares features, aesthetics, or value for money, I would like to concentrate on one part of the user interface that I think sums up iBank.

Underneath the list of transactions is this little “Quick Edit” area, that shows full details of the highlighted row. Here you can see I’m editing my purchase of Launchbar (more on that another day) and I would like to add a PDF of the receipt I received via email.

So, I correctly assume that the picture of the Parthenon is where I should be adding my image. There’s no “select…” option, so I try drag-and-dropping the PDF on the box. Nothing happens. I notice that there’s an “Edit” button on the right hand side and click that, to receive this message:

Um, yes? I did just click the Edit button after all.

Confirmation dialogs like this one belong in one place, and that’s destructive task such as “Are you sure you want to delete the pile of crap that is iBank from your computer?”.

Why I even have to switch to “Edit mode” in the first place is beyond me, as there’s no harm in the boxes being editable at all times. But then asking me if I’m sure I want to switch modes is the icing on the big stupid cake.

Unfeedr

May 27th, 2009

Over the last few weeks we’ve been slowly rolling out Unfeedr, a new Twitter-based site for cataloguing rubbish RSS feeds that you don’t read anymore.

The story begins with an idle thought about starting another blog which I wouldn’t have time to write, this time focussing on RSS feeds that I’d unsubscribed from and why. I happily subscribe to loads of new RSS feeds, but find it much more effort to later on unsubscribe (“OMG, what If I miss something?”) so it takes a good series of awful posts or annoying behaviour to make me leave. I thought that documenting these reasons might make interesting reading.

picture-21

Of course, I did nothing about this, until Alex noticed another Tweet from Guardian columnist Jemima Kiss, where she announced her reasons for unsubscribing from a feed with an obvious pang of regret. The public feedback and snappy reasoning cemented the idea that anyone could report on feeds via the medium of Twitter, and all we had to do is aggregate the results.

picture-22

And so Unfeedr was born. Think of it not as a forum for hating on crappy blogs1, but as a way of feeding-back to content providers about why you gave them up. It’s your way of saying “I’m sorry, it’s just not working out” to all those blogs clogging up your reader.

picture-23

The site is still being developed, next on the list is a leader-board for the most unsubscribed feeds, but we’d be delighted if you could send a few feeds over2 and give us your feedback.


  1. Although sometimes that’s exactly what’s necessary 

  2. Even if it’s to say that you’re unsubscribing from Rotacoo.com for “hardly ever posting, and when you do it’s just to promote your new nonsense website”. 

Review: Sumo Beanbag

May 6th, 2009

At the end of last year, the kind folks at Sumo sent us one of their Omni beanbags to try out. Presumably due to the upcoming christmas rush, they could only offer 3 of the 7 available colour options: Day-glo Orange, Tear-inducing Pink or the Why-didn’t-I-choose-that-option White. We opted for the Orange.

Upon the Omni’s speedy arrival, the first thing we noticed is that it’s absolutely massive, much bigger than we expected. It just amount squeezed into the corner of the room but, especially in orange, it still imposed.

Sumo claim there 10 different ways you can sit on it, which are each sort-of demonstrated on the site. However, I’d strongly advise against the “straddle it like a horse” mode, as it managed to very much hurt me in a way only men can get hurt.

In the end, we found the simple “use it as a chair” and “lie on the floor” modes the comfiest, but part of the fun is chucking it around to switch modes. Unfortunately, during this chucking around, we discovered that the Omni had been damaged in transit, and a small tear was leaking beans.

Sumo said this was very rare, and kindly arranged for a replacement beanbag to be sent to review instead. This second bag was the red colour option which, while still far from subtle, is much more pleasing on the eyes.

For proper testing, the replacement has been thrown around which much vigour, and has been very hardy. Due to space constraints it even spent some time as an outside cushion without suffering any noticeable damage. The “wipe clean” material, while not great for extended hours of sitting, does do a good job of repelling mud, tea and baby-puke stains.

All in all the Sumo beanbag is a fun, yet at times quite impractical, addition to the furniture. We’d certainly recommend one if you have lots of empty space in your living room.

Do you have a new product that you’d like reviewed by authors, web developers and top bloggers James and Alex Turnbull? If so, then drop us a line.