Gặp vấn đề với plugin jquery infinite scroll khi scroll page down

ttn · July 10, 2020, 5:43pm

Chào các bạn mình đang gặp vấn đề với load blog post từ ajax
mình có cái loop như này:

Summary

<div class="container">
	<div class="row demo-2">
		<?php
			$wp_query = new WP_Query(array(
				'post_type' => 'post',
				'posts_per_page' => 3
			));
			if ($wp_query->have_posts()) :
				while ($wp_query->have_posts() ) : $wp_query->the_post();
					echo '<div class="col-md-4 demo-2-it">';
					get_template_part( 'content', get_post_format() );
					echo '</div>';
				endwhile;
                                //pagination
				theme_paging_nav();
			else :
				get_template_part( 'content', 'none' );
			endif;
			wp_reset_postdata();
		?>
	</div>
</div>

còn đây là js infinite scroll lấy bài post bằng ajax khi scroll page down:
plugin jquery infinitescroll js

Summary

(function ( $ ) {
    "use strict";
    // global masonry variables
    var $masonry_container = $('.demo-2');
    // masonry Init
    function masonryInit() {
        if ( $masonry_container.length ) {
            masonryRun();
            //tell infinite scroll to wait once content is loaded
            $masonry_container.imagesLoaded(function(){
                masonryInfiniteScrollingInit();
            });
        }
    }
    // masonry Update
    function masonryUpdateLayout() {
        if ( $masonry_container.length ) {
            $masonry_container.masonry();
        }
    }
    // Layout Refresh
    function layoutRefresh() {
        masonryUpdateLayout();
    }
    // masonry Run
    function masonryRun() {
        if ( $masonry_container.length ) {
            // masonry init
            $masonry_container.masonry({
                itemSelector: '.demo-2-it',
            });
        }
    }
    // masonry Infinite Scrolling Initialization
    function masonryInfiniteScrollingInit() {
        $masonry_container.infinitescroll({
            navSelector : '.page-numbers',
            nextSelector : '.page-numbers a.next',
            itemSelector : '.demo-2-it',
            maxPage: 3,
            debug: true,
            prefill: false,
            errorCallback: function(){}
        },
        // trigger masonry as a callback
        function( newElements ) {
            newElements.forEach(function(e){
                $(e).css('opacity', 0);
            });
            var $newElems = $( newElements );
            // load images before masonry
            $newElems.imagesLoaded(function(){
                $masonry_container.masonry('appended', $newElems);
                //refresh all there is to refresh
                layoutRefresh();
            });
        });
    }
    function loadInit() {
        masonryInit();
    }
    $(document).ready(function(){
        loadInit();
    });
    // Fire once loaded
    $(window).load(function(){
        masonryUpdateLayout();
    });
})(jQuery)

Nguyên lý hoạt động của infinitescroll : trang blog sẽ mặc định hiển thị 3 bài viết, khi mình cuộn trang xuống thì nó sẽ load thêm 3 bài tiếp theo (thực chất là chuyển trang nhưng nó dùng ajax nối blog post luôn xuống dưới và ẩn phần phân trang đi) cho đến khi nào hết bài thì thôi.

Vấn đề là trong cái loop kia có 1 kiểu bài post là carousel, mình đang dùng là owlCarousel, khi cuộn trang thì cái plugin infinitescroll kia chỉ lấy đc kiểu dữ liệu tĩnh là html, ko gọi đc event của owlCarousel, nên cái carousel đó của mình ko hoạt động đc.
Cái này mình loay hoay cả tuần rồi mà chưa tìm đc cách giải quyết, bạn nào từng làm qua cái này rồi share cho mình với

Kollein_Vinh · August 24, 2016, 3:33am

toi nghĩ bạn kiểm tra cấu trúc hai Carousel đó xong track các event…JS chỉ đơn thuần access các DOM và invoke nó thôi