Добавление LazyLoad и InfiniteScroll в тему Wordpress

Question

Добавление LazyLoad и InfiniteScroll в тему Wordpress

Я хотел бы добавить плагины LazyLoad и InfiniteScroll jQuery в мою тему Wordpress.

Они оба хорошо работают, когда используются сами по себе, но когда я использую их вместе, плагин LazyLoad не срабатывает при загрузке следующей страницы.

Насколько я понимаю, это связано с тем, что LazyLoad не запускает все JavaScripts, которые поставлены в очередь в WP. Поэтому, чтобы обойти это, я должен использовать функцию обратного вызова.

Я безуспешно пытался получить функция обратного вызова для работы. Что я делаю не так? Или оба плагина просто несовместимы друг с другом?

Вот шаги, которые я предпринял:

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. Добавлена функция бесконечного прокрутки

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

2

infinite-scroll theme-development

Author: kleinermann, 2016-11-14

Source

1 answers

score 1 · Accepted Answer

Вам нужно добавить функцию обратного вызова в список аргументов как часть вызова функции, а не как часть объекта аргумента:

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

Вы можете удалить function(){ addLazyLoad()}, который является частью объекта infinite_scroll (после "contentSelector":"#content #main"); это ничего не изменит.