将LazyLoad和InfiniteScroll添加到WordPress主题

我想将LazyLoad和InfiniteScroll jQuery插件添加到我的Wordpress主题中。

它们单独使用时都能很好地工作，但当我将它们一起使用时，LazyLoad插件在加载下一页时不会启动。

据我所知，这是因为LazyLoad并没有激发WP中排队的所有Javascript。所以为了解决这个问题，我应该使用回调函数。

我尝试让回调函数工作，但没有成功。我做错了什么？或者这两个插件只是彼此不兼容？

以下是我采取的步骤：

1、将两个脚本排队

    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。添加了infiniteScroll函数

/**
 * 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。添加了Lazyload功能

/**
 * 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。添加了jquery代码

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

}

addLazyLoad();

相关推荐