web-dev-qa-db-ja.com

WordpressのテーマにLazyLoadとInfiniteScrollを追加する

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();
theme-developmentinfinite-scroll
2
kleinermann

引数オブジェクトの一部としてではなく、関数呼び出しの一部としてコールバック関数を引数リストに追加する必要があります。

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

infinite_scrollオブジェクトの一部であるfunction(){ addLazyLoad()}を削除することができます（"contentSelector":"#content #main"の後）。何もするつもりはない。

1
guiniveretoo