Adding LazyLoad and InfiniteScroll to WordPress Theme

by

I would like to add both the LazyLoad and InfiniteScroll jQuery plugins to my WordPress Theme.

They both work well when used by themselves, but when i use them together the LazyLoad Plugin doesn’t fire when loading the next page.

As far as i understand this is because LazyLoad doesn’t fire all the JavaScripts that are enqueued in WP. So to get around this i should use a callback function.

I have tried without success to get the callback function to work. What am i doing wrong? Or are both plugins simply not compatible with each other?

Here the steps i took:

1.Enqueued both scripts

    wp_enqueue_script( 'infinite-scroll', get_template_directory_uri() . '/js/jquery.infinitescroll.min.js', array( 'jquery' ), '', true );

    wp_enqueue_script( 'lazy-load', get_template_directory_uri() . '/bower_components/jquery_lazyload/jquery.lazyload.js', array( 'jquery' ), '', true );

2.Added the infiniteScroll function

/**
 * Infinite Scroll
 */
function infinite_scroll_js() {
    if( ! is_singular() ) { ?>
    <script>
    addLazyLoad();
    var infinite_scroll = {
        loading: {
            img: "<?php echo get_template_directory_uri(); ?>/img/ajax-loader.gif",
            msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
            finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
        },
        "nextSelector":".nav-previous a",
        "navSelector":".nav-links",
        "itemSelector":"article",
        "contentSelector":"#content #main",
        function(){
            addLazyLoad();
        }
    };
    jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );

    </script>
    <?php
    }
};
add_action( 'wp_footer', 'infinite_scroll_js',100 );

3.Added the Lazyload function

/**
 * Fix image attributes for lazyload
 */

function add_lazyload($content) {

    $content = mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8');
    $dom = new DOMDocument();
    @$dom->loadHTML($content);

    foreach ($dom->getElementsByTagName('img') as $node) {  
        $oldsrc = $node->getAttribute('src');
        $node->setAttribute('data-original', $oldsrc );
        $newsrc="".get_template_directory_uri().'/img/nothing.gif';
        $node->setAttribute('src', $newsrc);
    }
    $newHtml = preg_replace('/^<!DOCTYPE.+?>/', '', str_replace( array('<html>', '</html>', '<body>', '</body>'), array('', '', '', ''), $dom->saveHTML()));
    return $newHtml;
}
add_filter('the_content', 'add_lazyload');

4.Added the jquery code

function addLazyLoad() {
      $(function() {
         $(".entry-content img").lazyload({
             effect : "fadeIn",
             threshold : 200
         });
      });

}

addLazyLoad();

1 Answer
1

You need to add the callback function in the argument list as part of the function call, rather than as part of the argument object:

jQuery( infinite_scroll.contentSelector ).infinitescroll( 
    infinite_scroll, 
    function(){ addLazyLoad() }
);

You can remove the function(){ addLazyLoad()} that’s part of the infinite_scroll object (after "contentSelector":"#content #main"); it’s not going to do anything.

Leave a Comment