带有过滤逻辑的 jQuery 延迟加载/无限滚动

Question

我有一个页面充满了我按类名称过滤的项目。这很有效，但是，在使用 ajax 实现延迟加载之后，我很难让它协同工作。

我目前拉出下一页的项目，而不将过滤器应用于 ajax 调用，然后隐藏与所选过滤器不匹配的项目。这意味着您可以选择一个过滤器，滚动到页面末尾，然后就不会显示任何新项目。或者在某些情况下，在再次启动延迟加载之前仅显示一两个。这不是一个很好的用户体验。

使用过滤器从 ajax 调用中选择项目的替代方法似乎很难管理。比如如何跟踪已拉入 DOM 的内容并确保没有重复的项目？

有人可以帮忙吗？

用于过滤 div 的 JQuery。

jQuery( function( $ ) {

    var $divs = $('.box');

    //filter multiple divs on select
    var $selects = $('.filter_dd').on('change', function() { 

    var css_list_array = [];
        $selects.each(function(index){

            if ($(this).has('option:selected')){

                if( $(this).val() !== '' ) { 
                    var css = '.' + $(this).val();
                    var found = $.inArray(css, css_list_array);
                    if(found < 0) {
                        //if not already in array - add it
                        css_list_array.push(css); 
                    } 
                } 
            }
        });
        var css_string = css_list_array.join(''); 
        console.log(css_string);
        var $el = $(css_string); //selected CSS names           
        console.log($divs); //divs not being selected as this is empty
        $divs.removeClass('is-animated').fadeOut().promise().done(function() 
        {
            if(css_string == null || css_string==''){
                $divs.addClass('is-animated').fadeIn();
            } else {
                $el.addClass('is-animated').fadeIn();
            }
        });         
    });     
});

Ajax 代码:

    jQuery(document).ready(function($) {
        $(window).scroll(function() {
            var that = $('#loadMore');
            var page = $('#loadMore').data('page');
            var css_select = $('#loadMore').data('css');
            var newPage = page + 1;
            var ajaxurl = $('#loadMore').data('url');
            var docViewTop = $(window).scrollTop();
            var docViewBottom = docViewTop + $(window).height();
            var elemTop = $('#loadMore').offset().top;
            var elemBottom = elemTop + $('#loadMore').height();  



        if( $('#no-more').length == 0) {
        //check if scrolled to 'load more' element
        if ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) {
            if (typeof loading != 'undefined' && loading) return;
            loading = true; 
            $('#resource_spinner').show();

            $.ajax({
                url: ajaxurl,
                type: 'post',
                data: {
                    page: page,
                    action: 'resources_load_more'
                },
                error: function(response) {
                    console.log(response);
                },
                success: function(response) { 
                    if (response == 0) {
                        //check if any more post
                        if ($("#no-more").length == 0) {
                            $('#ajax-content').append('<div id="no-more" style="text-align:center;font-size:22px;font-weight:bold"><p>No more posts to load.</p></div>');
                        }
                        $('#loadMore').hide();
                        $('#resource_spinner').hide();
                    } else {
                        $('#loadMore').data('page', newPage);
                        $('#ajax-content').append(response);
                    }
                },
                complete: function(){
                    $('#resource_spinner').hide();
                    loading = false;    
                    $divs = $('#ajax-content').find(".box");

                    if(css_select){
                        console.log('ajax'+ css_select);
                        $divs.not(css_select).hide();  
                    }
                }
            });
          }
        }
    });
});

Answer 1

如果您不想在ajax调用和响应中过滤掉(我推荐的东西)，我会在img src(或其他大尺寸内容)上使用延迟加载，并从ajax调用中获取所有帖子。完成后，您可以隐藏项目以过滤掉并强制加载前“x”(假设 12)个帖子的媒体内容。如果帖子很多，您还可以在外观上为每个“页面”使用页面惰性加载器，其中将包含那些已过滤掉的项目(假设有 12 个)，并在页面惰性加载器处于 View 中时强制加载其媒体内容。 [选项1]

按照你的路径，为了给出最直接的答案(我不推荐)，我会为每个页面设置帖子编号，然后使用ajax调用循环一个函数(递增页面并为每个响应添加html )直到与过滤器匹配的项目足以“完成”一个页面(达到帖子编号)。完成后，只显示那些已经过滤的项目。 [选项2]

如果您需要选项 1 或选项 2 的代码示例，请告诉我。