This post originated from an RSS feed registered with Python Buzz by Phillip Pearson. Original Post: Javascript "badges" that don't kill your page load process 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

One thing you can do in PeopleAggregator is show your friend list (well, part of it) on your blog, using a Javascript include of the type pioneered by blogrolling.com and commonly used for advertising (e.g. AdSense) and all sorts of blogging things. You include some markup on your site that looks like this:

And you get a nice display of your current friends, like this:

The only problem is that <script> tags which load extra scripts like this cause your browser to pause rendering the page while the script loads. Apparently there's no way for browser makers to fix this, as scripts can do anything to the page that they like, and browsers aren't allowed to run them out of order. Or something.

Also, if the site generating the Javascript goes down, you may get a browser error. If it doesn't go down, but just gets really slow, your blog page may never display. The Radio Userland comment server went through a bad patch a while ago where its slow Javascript delivery was bogging down the display of all blogs that used radiocomments.userland.com.

BUT, there's something USERS can do to get around this. I'll make it a bit easier to do this in the final version of PeepAgg, but this solution is nice in that you can retrofit it to any 'badge' display that uses document.write to write its data.

Basically, you move the script include down into (or after) your footer, so that it runs AFTER the whole page has rendered. Then you temporarily replace the document.write function with something that collects the data, then after the script finishes running, you drop that data in a div (prepared earlier).

Here's how it looks. First we have the div, which you put in your sidebar:

Now right at the end of your main blog template, you do this:

The line in bold is the original script include. Everything else is the code to gather up the badge HTML as the included script calls document.write, then drop the data into the div.

I expect this would work for AdSense as well, which would be nice. It would certainly speed up my blog's page load time.

Comment