Loading Javascript widgets asynchronously
Lots of sites now provide javascript widgets. Typically, they ask you to paste something like this into your blog sidebar:
<>
This bit of code tells browsers to go off to www.flickr.com and fetch the badge.js.gne file. There’s a problem with doing it this way: if www.flickr.com is running really slowly, the file might take quite a while to download, and until it’s downloaded, the rest of your blog won’t display.
I wrote about this problem back in June, and suggested a way around it - a hack that you could use to capture the HTML written by the included Javascript, and drop it into a div. This was better, but still not perfect. It required splitting the code to paste into your blog into two sections: one to go in your sidebar, and one in your footer. Also, it was a bit of a hack.
Here’s the new and improved version, which is part of the current development version of PeopleAggregator. It’s one chunk of HTML/Javascript that you can drop straight in your blog, that will show a placeholder div at first, then download the content once the page is finished loading.
<
>[Loading PeopleAggregator widget …]<
><;<>
And here’s how that looks in practice (a little broken in Firefox, I’m afraid!):
How it works: it hooks window.onload
to find out when the page has finished loading, at which point it adds a new <
I’m just about to implement multiple widgets, so a single user on a PeopleAggregator install can configure several widgets. You could have one for each of your blogs, or perhaps more than one on a blog, if you wanted to show your friends at the top of your sidebar and your blog posts in the main body area. And of course, because of the new trick, it won’t slow down your page load, even if the PeopleAggregator server bogs down or crashes.