Very succinct.

I do something very similar, except I use the custom attribute on an image element to hold the url. The src attribute contains a placeholder. When ready, all my script does is switch out the src with the desired image url. This is a bit faster than creating and inserting elements into the DOM.

I also determinate the readiness on scroll position so I’m only manipulating elements that are in view instead of everything. The page becomes unresponsive very quickly when you have a lot of elements to work over.

Still, your technique is a nice and simple example to get one started.

The newest version of jQuery natively supports the data attribute, you van simply use

$(el).data(“gravatar-hash”)

Just a quick addition..

I felt so guilty doing this when I was making my portfolio. I thought there had to be a better way. What a relief!

If you don’t specify a src, what about non-JS users? What about semantics? (ooooh)

Great article indeed, I thought of a method like this but never went to actually create it.

Concerning the non-JS users: I don’t think this method is really a handicap for them – turning off JS is.

It’s worth noting that on Flickr we’ve disabled this type of image deferral for IE6, 7 and 8.

We found that the cost of finding all of the nodes that need images inserted, and the impact on the page that downloading all of those images had, vastly outweighed the benefits we got by making those images load after the rest of the page has finished. It made the pages very sluggish and jerky, and significantly delayed event handlers from being invoked.

More modern browsers don’t have this problem at all, and are able to run the JS and download the images without any appreciable CPU load. We are still using this technique, with data-defer-src, for them. IE, though, gets img tags with normal src attributes instead.

Sorry, but I have to ask again, because I’m interested in your opinion. Is there any reason, not to use something like this and wouldn’t it be a better solution as noscript users will still be able to see the images?

<noscript data-hash=“124a03bd93eacc64f799527d8aea6233”> <img src=“http://www.gravatar.com/avatar.php?gravatar_id=124a03bd93eacc64f799527d8aea6233” />
</noscript>

$(“noscript[data-hash]”).before(function(){ return “<img src=http://www.gravatar.com/avatar.php?gravatar_id=”+
$(this).data(“hash”)+”/>”;
})

thanks for this article. I also made a plugin for joomla that lazy load images under the fold, available on my website. That could save a lot of bandwith and speed up the loading of the webpage, specially galleries.

Why don’t you just use the <noscript> Tag in order to show it to the 2%?

The other 98% of the user will profit from your enhancement and in a gzipped html this will not really effect your speed.

I haven’t tried this yet, but wouldn’t this mess with the flow of the page? i.e., would the browser not have to re-render as the images are added?

In any case, here’s a suggestion. Maybe using a default image for all users (which only needs to load once) and then switching for each Gravatar once the page is loaded would also work well.

Anyway, great technique as usual. Thanks!

Great article, I am ashamed to say I wasn’t familiar with the data attribute so in the past I have put that type of data in the id or class element.

Rather than not rendering an image at all wouldn’t it be better to load a default avatar and just replace the image with the correct once everything has loaded?
The browser would only see one request as its the same file and the user wouldn’t see a drastic change to the presentation when the avatars load.

As of jQuery 1.4.3, you can just use `$(this).data(‘gravatar-hash’)` instead of `$(this).attr(‘data-gravatar-hash’)`. Also, why use `$(window).load(function() { … });` instead of `$(function() { … });`?

I thought this was going to be about speeding up websites in general. I was quite surprised to see it focus on gravatars.

That said, I think it’s a good idea and I’ll try implementing this in future projects!

Thanks everyone for the comments, especially Ross for the detailed notes on Flickr’s implementation. It’s great to hear real world experience and alternative ideas around the best way to use techniques like this.

Thank you also Mathias and Julian for the jQuery tip. I’m sure I’m not the only one who misses out on some of the features that land in every new version of jQuery.

Scott: When I get a chance I’ll look back at my notes and see what I can find about Firefox. I stopped investigating removing the image with JavaScript when I thought there were no simple workarounds for the other browsers…

Given how wide spread the use of gravatars are, I wonder if it’d be worth suggesting to Automattic about a feature enhancement that would allow for generating gravatar sprites?

That way, you could make a single request to the gravatar servers to generate the gravatars for a given page in one go and then just use the simple CSS sprite technique to switch them out for each comment.

re: “We can use similar code to delay loading any images that don’t need to be present immediately.”

That said, it would seem to me it makes sense to delay displaying /loading anything that can wait. For example, the comments themselves are usually below the fold. Why not wait for them to be within scrolling distance? Or, as I think you’ve done with your comments, let the user click to see the comments. Then load / display them.

In any case, good stuff. Thanks for sharing.

p.s. I realize this article isn’t new but I wanted to comment none the less. Also, someone might have already suggested this, I did not read all the previous comments, sorry.