Asynchronous gist embeds

I discovered recently that gist embeds use document.write(). This is fine in some cases, but it doesn’t work at all with asynchronously-loaded content. This is because document.write() can’t be used once the document has completed loading. document.write() is also blocking meaning that the document cannot proceed to load until the write is complete. If gist.github.com is slow to respond, your site will load slowly.

The good news is that we can get around this. Each gist has a JSON endpoint, which we can use to load the gist asynchronously. The following is a simple example using jQuery:

For a more flexible approach, please check out this jQuery plugin that I wrote. This site you are reading now uses it. That gist right there.