Infinite scroll / lazy loading with NextGen Gallery

2 Views

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.

Read More

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!

Post Views: 2

Related posts

Leave a Reply

3 comments

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

  2. 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">
        (function($){
          $("img.lazy").lazyload();
        })(jQuery);
    </script>';
}

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[^>]+)(srcs*=s*"[^"]+")([^>]+>)/i', 'preg_lazyload', $content);
}

add_filter('the_content', 'filter_lazyload');

  3. 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!