Question

我有一个页面，其中包含按类名过滤的项目。这很好，但是，在使用ajax实现延迟加载后，我很难让它一起工作。

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

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

有人可以帮忙吗？

jQuery for filterng divs。

    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();  
                    }
                }
            });
          }
        }
    });
});

Ajax代码：

Exception in thread "main" java.lang.UnsatisfiedLinkError: no lwjgl in
java.library.path at
java.lang.ClassLoader.loadLibrary(ClassLoader.java:1867) at
java.lang.Runtime.loadLibrary0(Runtime.java:870) at
java.lang.System.loadLibrary(System.java:1122) at
org.lwjgl.Sys$1.run(Sys.java:72) at
java.security.AccessController.doPrivileged(Native Method) at
org.lwjgl.Sys.doLoadLibrary(Sys.java:66) at
org.lwjgl.Sys.loadLibrary(Sys.java:96) at
org.lwjgl.Sys.<clinit>(Sys.java:117) at
net.minecraft.client.Minecraft.getSystemTime(Minecraft.java:2995) at
net.minecraft.client.main.Main.main(Main.java:39) at
Start.main(Start.java:11)

Answer 1

如果你不想在ajax调用和响应中过滤掉（我推荐的东西），我会在img src（或其他大尺寸内容）上使用延迟加载，并从ajax调用中获取所有帖子。完成后，您可以隐藏项目以过滤掉并强制加载第一个“x”（比如12个）帖子的媒体内容。如果帖子非常多，你也可以在每个“页面”上使用页面延迟加载器，它将包含那些已经过滤掉的项目（比方说12）并强制在页面延迟加载器处于视图中时加载它们的媒体内容。 [选项1]

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

如果您需要选项1或选项2的代码示例，请与我们联系。

Answer 2

看起来你有相互矛盾的担忧。您正尝试在客户端和服务器之间建立共享过滤器状态，同时还能够使用仅客户端过滤到不同的约束。

如果可能，我会选择一个。解决方案根据您最重要的约束条件而有所不同

仅客户过滤
如果仅客户端过滤是最重要的，那么放弃延迟加载将是最容易的。

延迟加载
如果延迟加载是最重要的，那么每次更改过滤器时都可以替换列表。滚动时，可以使用过滤器，排序和偏移量（已显示的记录数）调用服务器。这允许您查询数据，以便您可以始终如一地获取与过滤器相关的下一条记录而无需重复，并且还可以知道何时没有结果。

必须同时具有
如果您需要两者，那么您的解决方案本身就很复杂。在连接受限的环境中，这个解决方案可能值得考虑。

您最好的选择可能是使用相同的过滤器，排序，偏移模型，但您可以计算页面中现有项目的偏移量（通过计算类的元素）。您的服务器端查询可以获取所有项目，直到它具有过滤器的下一个n，或者只添加属于过滤器的项目。

在任何情况下，无论如何，您可能无法节省太多，因为每次重新应用过滤器时，您都需要检查是否有足够的项目，如果没有则进行服务器调用。

您也可以完全替换dom元素，但使用pouchDb之类的框架进行部分本地数据查询。这会有更简单的管理和会话持久性，但它会为您的应用添加额外的层。

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

2 个答案: