WordPress image lazy-loading plugin

Recently I’ve been spending a lot of time on a new Rails project that deals with photos and it also uses a lot of jQuery. I love the jQuery image lazy load plugin and thought since my blog is pretty image-heavy, it’d benefit from it too. It’s trivial to use this plugin, but since my blog tracks WordPress via Subversion, I wanted to do it as a plugin so I wouldn’t have to touch the WordPress code. After 15 minutes or so I hacked together a plugin for this.

You can download it at the plugins directory at WordPress. It’s also available on Github.

It took a day to get commit rights to the Subversion repo of WordPress, since I use Git and had already pushed to Github, it was a bit of an annoyance to add the empty Subversion repo with git-svn. I won’t go into the steps, but this thread helped a lot. I must say that since it’s a shared Subversion repo, the revision number was 119065 to start with, so git svn fetch took a very long time. I spent almost an hour to get to the point so I could do git svn dcommit. And now every time I do dcommit it takes a while coz it pretty much has to compute the diffs between all the recent commits and apply them to Subversion. After using Git for so long I forgot how painful Subversion was.

, , , ,

27 Responses to WordPress image lazy-loading plugin

  1. ayn May 27, 2009 at 10:13 pm #

    testing anti-spam (I have both Akismet and TypePaid AntiSpam enabled).

  2. Chris Vincent May 28, 2009 at 5:02 pm #

    I noticed the lazy image loading. That shit is tight!

  3. Randy June 22, 2009 at 6:18 am #

    Installed the lazy image loading plug-in on two different WP blogs, but it doesn’t seem to be working… What can I do to troubleshoot it?

  4. ayn June 22, 2009 at 9:00 am #

    Give me the urls and I’ll take a quick look.

  5. Ramoonus July 6, 2009 at 2:53 am #

    The plugin seems to give an error on some layouts on IE8
    including your own site!
    and it doesn`t work with the K2 theme

  6. ayn July 6, 2009 at 11:08 am #

    @Ramoonus thanks for the note, I’ll check it out, I don’t use IE myself and I don’t even have IE8 in vmware. I’ll check out the K2 theme as well. My guess is that that theme uses jQuery with noConflict(), so the calls are jQuery() instead of $().

  7. ayn July 6, 2009 at 11:41 am #

    I just pushed a fix, it works fine in IE7 for me, well, it always did, the error you got was probably due to using $ with noConflict enabled.

  8. Randy July 30, 2009 at 12:04 pm #

    Two sites, both on version 0.5:

    http://oostdyk.com/randy/blog/

    It appears to be working, in that the images show up as you scroll, but it doesn’t appear to delay the downloading of the images, which is more important on the next site:

    http://photosparks.com/blog/

    Here, I can see in the source that the jquery and lazyload js are there, they just don’t seem to be doing anything.

    Sorry I didn’t include them in the initial comment above!

  9. Randy July 30, 2009 at 12:07 pm #

    okay, oops, disregard! It’s working!!! =)

    Thanks for the work you’ve done in creating the plug-in, and sharing it!

  10. timo March 12, 2010 at 6:07 pm #

    hey, i hope you are still there. i need some help with your great plugin. could you tell if if its possible to exclude some pages from the lazy loading script? i´ve some problems with my frontpage and the script.

    thanks!

  11. alexluft May 9, 2010 at 3:32 am #

    Hey there – having a bit of a plugin conflict issue here athttp://techsnack.tv/site

    The lazy load plugin seems to break the featured content gallery http://wordpress.org/extend/plugins/featured-cont

    Also, I tried out the plugin on my non-test site with many big images, but it makes the browser sluggish (http://gmauthority.com) – so I disabled it.

    Le me know if that helps, at all.

    – Alex

    • ayn May 10, 2010 at 10:05 am #

      You can change the jQuery selector to not do lazyload on images inside the featured content gallery div. Change the lazyload to do something like:

      jQuery("div").not(".wpn_featured.wpn_expandableimg").find("img").lazyload

      –Andrew

      • Greg May 31, 2010 at 9:35 am #

        I'm not a jQuery expert, and, i don't see in which file this code should be place, and, at which place ?
        Thanks for the answer.
        Best regards

  12. Simon June 3, 2010 at 7:10 am #

    Hey there ayn! thanks for the plugin work! One question though, I've been trying to implement this in my functions.php file and am not succeeding right now: http://pastebin.com/Auj01H9y

    I moved the image to _inc/img/ and the js file to _inc/js/ and defined the inc path somewhere else as follows: $inc_path = STYLESHEETPATH . '/_inc/';

    Thanks for your help there as well!

    • ayn June 3, 2010 at 11:01 pm #

      I'm not sure what you're trying to do. :S

  13. Simon June 4, 2010 at 10:18 am #

    😉 hmm does it not make sense to you? I'm just trying to incorporate this into my theme, instead of another plugin. So I moved the functions to my theme-functions and the pic and the js to _inc/img/ and inc_/js/ respectively. But I have failed to adapt it so far, throwing an error.

    • ayn June 7, 2010 at 11:41 pm #

      oh ok, if you’re making a theme, then you don’t even have to look at my plugin, just include jquery and lazyload js as you would and do the lazyloading in the header of your theme.

  14. Emmanuel Paris August 6, 2010 at 3:55 am #

    Thanks for this awesome plugin.
    Alone, it works like a charm.
    But it has a conflict with Lightbox.
    Lightbox is not working anymore when LazyLoad is installed.
    Any clue on how I could fix this ?
    I would like to use both.
    Thank you…..

  15. @hopkinsdavid August 7, 2010 at 7:06 am #

    Great plugin, I had it working for a couple of days before I realised that it wasn't working on my iPhone with the WPTouch plugin installed (vn 1.9.16)

    Hope you can get it sorted.

    David.

  16. Julian April 14, 2012 at 1:08 am #

    Hi, love this plugin. How would I go about adding a default alt attribute to the placeholder gif?

    • ayn June 28, 2012 at 6:10 am #

      I’m not really sure actually, without using js to set the alt text after lazyload runs. But that is probably not the most efficient thing to do if you have a lot of images.

Leave a Reply