Question

因此，我尝试使用jQuery实现延迟滚动，方法是从服务器获取所需的项目。这就是我的工作方式。

检测页面的末尾，与服务器通话以检索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并返回结果。

所以向下滚动发生得很好，但是当我向上滚动时，需要检测到这一点，以便在服务器上调用N-1到N-10列表。但是我发现在我需要的地方很难以jQuery(window).scrollTop() == 0拨打电话对手机不起作用？

任何已经这样做的图书馆？任何帮助都会有所帮助。谢谢。

Answer 1

你的延迟加载逻辑存在一个重大缺陷。

您的方法问题：

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

更好的解决方案：

将新项目追加或扩展到屏幕上已加载的项目的现有列表，这样您最终不会再次加载相同的项目向上滚动
此外，它还可以提高您的网站效果无论页面是什么次，都只加载一次项目用户向上和向下滚动。

注意：懒惰加载功能没有javascript / jquery插件，有更多功能可以解决您的所有性能问题。“尽量不要重新发明轮子” < / em>的

懒惰的滚动jquery

1 个答案: