Adding LazyLoad and InfiniteScroll to WordPress Theme

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();

Solutions Collecting From Web of "Adding LazyLoad and InfiniteScroll to WordPress Theme"

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.