Dynamic loading of items in Google Reader

Question

I've been using Google Reader and want to implement a similar technique to the way they "seem" to late load the content of each post. When you click on one of your subscriptions, you see a series of posts with a snippet and other information. When you click on a post, it expands to reveal the full body. I thought they were simply toggling an element's visibility but they seem to be inserting into the DOM on the fly. You can prove this by looking at the HTML after the page has loaded - theres no sign of the expanded content. If the body contains images, they are loaded only when expanded. This significantly improves the load time of the initial request because its not loading EVERY image for EVERY post.

I have 2 ideas of whats happening:

1. They're doing an AJAX request and inserting the response, thus loading and rendering any images as and when needed.
2. They're doing something fancy with JavaScript but I have no idea what exactly.

My first attempt rendered the collapsed content but used CSS to make it invisible:

display: none

I then toggled the visibiliy with jQuery:

$("itemDetail").toggle()

The only problem with this is that the images inside the invisible content are loaded during the initial request - something that isn't obvious to the user but it could have other negative effects.

Here is the list view (all collapsed):

Here is the list view with an expanded post:

Any ideas?

Answer 1

They're doing an AJAX request and inserting the response, thus loading and rendering any images as and when needed.

Well, yes, that's what they're doing.

So, what's the question exactly? What you're doing with visibility is completely different, and as you yourself say, not nearly as efficient.

So you need to learn how to make that request with JQuery, and put the HTML you get from the request into the page at the right point.