WordPress image lazy-loading plugin

27 Replies

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 thoughts on “WordPress image lazy-loading plugin”

  3. Randy

    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?

    Reply ↓
  6. ayn Post author

    @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 $().

    Reply ↓
  7. ayn Post author

    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.

    Reply ↓
  8. Randy

    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!

    Reply ↓
  10. timo

    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!

    Reply ↓
    1. ayn Post author

      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

      Reply ↓
      1. Greg

        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

        Reply ↓
          1. adam

            is there any chance you could post this modified code – as i can't seem to get it to work. i am getting errors when i try to place the code into the line 25. thanks.

  12. Simon

    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!

    Reply ↓
  13. Simon

    😉 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.

    Reply ↓
    1. ayn Post author

      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.

      Reply ↓
  14. Emmanuel Paris

    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…..

    Reply ↓
  15. @hopkinsdavid

    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.

    Reply ↓
    1. ayn Post author

      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.

      Reply ↓

Leave a Reply