Lazy-Load Avatars

In my previous post, The Quest For Speed, I mentioned that lazy-loading avatars is a good way to improve your site performance:

The overwhelming majority of visitors never leave a comment. Chances are, most don’t even scroll down to the comments section. So why waste their time and bandwidth by loading avatars that they’ll never see? A better option is to delay the loading of avatars until the user has scrolled far enough to actually see them.

I also promised to post the plugin that would allow you to implement this feature on your own WordPress site. So here it is.

Download

lazy-avatars.zip (3 KB)

Usage

  1. Install and activate the plugin.
  2. Open your comments.php find a line that looks like this: 
    <?php wp_list_comments(); ?>
  3. Add this line above the wp_list_comments call: 
    <?php do_action('enable_lazy_avatars', true); ?>

This will enable the lazy-load feature for the avatar images in your comments section. If you want to use it everywhere on your site – e.g. in the sidebar or the admin panel – you can instead add the line from step #3  to your functions.php file.

The way it works is that the plugin replaces all avatar images with place-holder <div>’s.  Then it monitors the scrollbar position. When one of the place-holders comes into view, the plugin creates a new <img> tag inside the place-holder <div> and sets its “src” attribute to the original avatar URL.

With regards to styling, each place-holder has any CSS classes that the original avatar image had, plus two  more – “lazy-avatar” and “pending”. The “pending” class is removed once the avatar has been loaded. You can use this to apply a custom style to avatars that haven’t been loaded yet, e.g. a by adding a spinning “loading…” icon as the background image.

Compatibility

The plugin has been tested in the following environments:

  • WordPress 3.0.4 and 3.1-RC2.
  • Firefox 3.6, Opera 11,  Chrome 9 and Internet Explorer 9.

It will probably work fine in older versions of Firefox, Opera, Chrome and possibly Safari (not tested). However, it will not work in any version of Internet Explorer older than IE9. This is because old versions of IE don’t support the addEventListener method and the pageYOffset property.

If you’d like to write your own image lazy-loading script that is fully cross-browser compatible, take a look at jQuery’s scroll and scrollTop methods. There’s also an inView jQuery plugin that could simplify the task even further.

The plugin also uses custom data- attributes to store avatar image URLs. This is, strictly speaking, not a standards-compliant thing to do (except in HTML5), but I’ve found that it works well enough in practice.

Related posts :
This entry was posted on Monday, January 31st, 2011 at 17:04 and is filed under WordPress Development, WordPress Plugins. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

11 Responses to “Lazy-Load Avatars”

  1. Milan says:
    February 1, 2011 at 19:35

    This javascript technique is useful only for this type of images that are not important for search engines. Last year I was redesigning one site with many photos and wanted to use jQuery Lazy Loading but it doesn’t work, and workaround also included removal of src which means search engines doesn’t see it.

    As of plugin, I recommend you to use wp_enqueue_script instead of what you use now.

  2. White Shadow says:
    February 1, 2011 at 20:13

    I’m well aware of wp_enqueue_script, but in this specific case I decided to ignore it and just include the script in-line. Loading it from an external file would incur HTTP connection overhead, which I think is not worth it for such a short script (less than 600 bytes).

  3. Milan says:
    February 1, 2011 at 20:24

    I actually meant for version you offered for download, not the one used on your site.

  4. White Shadow says:
    February 1, 2011 at 21:52

    Yes, but wouldn’t the same considerations apply?

  5. Milan says:
    February 1, 2011 at 22:00

    When file is enqueued, it can be easily dequeued so user can place code where he means its best for him. It is small code, but consider having several plugins with small code. If they were enqueuing them, combinig in one file would be easier.

  6. MK Safi says:
    February 1, 2011 at 22:19

    Why not use Lazy Load on all images below the fold — not just Avatars? I’m using this plugin on one of my sites and it’s working fine. You can modify it to have it exclude images with a certain class name, if you want.

  7. White Shadow says:
    February 1, 2011 at 22:27

    @ Milan:
    Good point about combining scripts into one file. Nevertheless, I’m going to leave the plugin as-is. If someone wants to switch it to wp_enqueue_script, they can do it by editing just a couple of lines.

    @ MK Safi:
    As I mentioned in the post, I’m personally averse to including a whole JS library just to get this one feature. If that is not a concern for you – e.g. if you already use jQuery for other things – then that plugin looks like a very good choice.

  8. Milan says:
    February 1, 2011 at 22:32

    Problem with that plugin is that it uses Lazy Load Plugin for jQuery and as you can see at its page, it doesn’t work anymore.

    Yes, when you scroll down you see that images load that moment, but actually browser loads them as if there weren’t Lazy Load, they are simply shown that moment.

    If you use Developer Tools in Chrome or LiveHTTPHeaders in Firefox, you can see that by yourself.

  9. Resim Bul | Resimlerle En Yeni Kataloglar ve Popüler Aramalar says:
    November 7, 2011 at 20:46

    This is doesn’t working in Chrome. I site users are usually using Google Chrome. Anyone help me?

  10. laptop accessorie says:
    June 14, 2012 at 09:21

    This is doesn’t working in Chrome

  11. podatek zryczałtowany says:
    July 23, 2013 at 22:34

    Look at my web-site – podatek zryczałtowany

Leave a Reply