延迟滚动 jquery

Question

所以我正在尝试使用 jQuery 实现延迟滚动，方法是在需要时从 server.So 中获取项目，这就是我的做法。

检测到页面结束，调用服务器以检索更多的 N 项。
然后清除 div 加载项目并将 scrollTop 设置为 div 顶部。
当用户想要返回阅读之前的列表时，调用服务器以取回项目。

这是简短的代码。

if ((scrollHeight - scrollPosition) / scrollHeight === 0)
    {
        //end of the page,scrolling down retrieve N more listings
        doRequest("down");

    }

    if(jQuery(window).scrollTop() == 0)
    {
       //top of the page,scrolling up
        doRequest("up");
    }
    });

function doRequest(scroll_dir)
{

    if(scroll_dir == "down")
    {
        if(jQuery("#detail").length)
            listing_id = jQuery("#detail input").last().val();
    }
    else if(scroll_dir == "up")
    {
        if(jQuery("#detail").length)
            listing_id = jQuery("#detail input").first().val();

    }
    jQuery.ajax({

    type: "GET",
    url: url,
    data: {params:params,start:listing_id,scroll_direction:scroll_dir}, 
           success: function(results)
           {

            if(results.length > 0)
            {
             jQuery('#detail').html("");
            }

           //load the results 
           //append to div,jQuery('#detail').append(data);
          //code skipped for brevity

        scrollTop = jQuery("#detail").offset().top;

        jQuery(window).scrollTop(scrollTop);

        } ,

         });
}

所以我有一个后端控制器，它使用带有滚动方向的列表 ID 和 returns 结果。

所以向下滚动很好，但是当我向上滚动时，需要检测那个点来进行服务器调用以检索 N-1 到 N-10 listings.But 我发现很难我需要打电话的地方，因为 jQuery(window).scrollTop() == 0 不适合手机？

任何图书馆已经这样做了？任何帮助都是 helpful.Thanks。

Answer 1

您的延迟加载逻辑存在重大缺陷。

你的方法有问题：

您的第 1 步很好，但第 2 步和第 3 步存在重大问题。
从第 2 步开始，清除当前视图中的现有项目或 div 并加载新项目是个坏主意，因为向上滚动时可能需要再次加载它们在你的情况下。

更好的解决方案：

将新项目追加或扩展到屏幕上已加载的现有项目列表中，这样您就不会在加载时再次加载相同的项目向上滚动
它还可以提高您的网站性能，因为您不管页面被访问多少次，只加载一次项目由用户上下滚动。

注意：没有 javascript/jquery 的延迟加载功能插件，具有更多功能，可以解决您的所有性能问题。"Try not to Reinvent the wheel"

延迟滚动 jquery

Lazy scrolling jquery

jquery

lazy-loading