This post originated from an RSS feed registered with Python Buzz by Phillip Pearson. Original Post: Loading Javascript widgets asynchronously Feed Title: Second p0st Feed URL: http://www.myelin.co.nz/post/rss.xml Feed Description: Tech notes and web hackery from the guy that brought you bzero, Python Community Server, the Blogging Ecosystem and the Internet Topic Exchange Latest Python Buzz Posts Latest Python Buzz Posts by Phillip Pearson Latest Posts From Second p0st

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.

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 <script> element into the header of the page, which fetches the widget Javascript. The Javascript is different from before; instead of using document.write, it inserts the widget HTML straight into the DOM using document.getElementById, using the ID specified at the end of the URL. 8113571 is a random number, just in case you have multiple widgets or other sites start using this code.

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.

Comment