I'm working on a project for a friend that involves a massive page with 3,000+ photos. See: http://www.thepurplepixie.com/projects/purple-pixies-people-project/

Currently, I have pagination set to 50 thumbnails per page in order to try and get the Infinite Scroll (Wordpress Plugin) (Infinite Scroll Homepage) to work, and to illustrate how I have the galleries set up in NextGen. Before, I had pagination off so it was one massive wall of photos, which, while accomplishing more or less what I was wanting, ultimately was brutal to load -- both in terms of memory and bandwidth.

I can't seem to get the plugin version of Infinite Scroll to work, I'm guessing because it's more structured towards post content than big bunches of images. Also, I have multiple instances of the pagination system per page, due to multiple galleries per page.

Does anyone have any idea how I would go about lazy loading these images?

Thank you!

  • Well either the plugin works or not. Would be good at least if you share wether it does or not ;)
    – hakre
    Mar 7, 2011 at 11:19
  • Apologies, I've clarified my question. I'm pretty sure it's not going to work, if only in that I have multiple pagination nav elements per page, and that plugin seems more designed for post than gallery content.
    – aendra
    Mar 7, 2011 at 17:40

3 Answers 3


Try the Lazy Load plugin — its code is said to be used on WordPress.com VIP sites, and the plugin is pretty current (last updated July 4th).

Caution! Lazy loading images is tricky on slow connections, where there's a chance that images fail to load at all. Even a small bug or incompatibility in the JavaScript code can break your site.

  • That is awesome -- will try that out first chance I get!
    – aendra
    Jul 9, 2012 at 14:51
function enqueue_lazyload() {
    wp_enqueue_script('jquery_lazy_load', get_stylesheet_directory_uri() . '/js/jquery.lazyload.min.js', array('jquery'), '1.9.1');

add_action('wp_enqueue_scripts', 'enqueue_lazyload');

Next, we have to add a small bit of Javascript to our footer to get the lazy load plugin to recognize images. You can see how this works on the plugin’s homepage, but basically we have to specify a class for the plugin to target. It will use any images with this class to swap out a placeholder image with the actual image when a user scrolls to it. We’ll use the wp_footer action to automatically append this to the footer of each one of our pages.

function footer_lazyload() {
    echo '<script type="text/javascript">

add_action('wp_footer', 'footer_lazyload');

With this code in place, the lazy load plugin will actually start working. But our images are still being loaded in by WordPress. The trick is to filter through all of our posts and swap out an image with a placeholder image. Then, per the plugin’s instructions, we use a “data-original” attribute on the img tag to signify the actual URL of the image. Finally, we add a class of “lazy” to each image so jQuery knows to look for it. The lazy load plugin will wait for these images to come into a users view, and then pull them in using AJAX and load them on the page. Our first step is to add a simple filter using preg_replace_callback to search for img tags.

function filter_lazyload($content) {
    return preg_replace_callback('/(<\s*img[^>]+)(src\s*=\s*"[^"]+")([^>]+>)/i', 'preg_lazyload', $content);

add_filter('the_content', 'filter_lazyload');

The jQuery lazy load plugin for WordPress worked well for me in the past. Note that in September 2010 the Lazy Load author wrote this:

Lazy Load is currently not usable. It does not work with the latest browsers as expected. I have currently no time updating the code myself. Patches are always welcome. If you find a solution just fork and send a pull request. Thanks!

  • The caveat you listed is the reason I'm asking this question -- I need something that works cross-browser. It'd be unacceptable for a user client to load the entire page at once (unless they don't have JS enabled; at which point, I can only do so much) given its size.
    – aendra
    Mar 7, 2011 at 18:07
  • 1
    @aendrew Lazy load definitely doesn't work in New Browsers, especially webkit based ones. If you know what you are doing, you can alter output to follow the html structure suggested by sebastianoarmelibattana.com/projects/jail/example5
    – Wok
    Apr 6, 2011 at 20:51

Not the answer you're looking for? Browse other questions tagged or ask your own question.