Question

我正在创建无限负载，意味着当用户到达页面底部/特定div时会加载新页面。目前我有这个代码在点击时加载新页面。

$("#about").click(function(){
    // load about page on click
        $("#response").load("about.html");
    });

这里是否有人更清楚地了解如何在不点击/到达底部的情况下加载新页面

Answer 1

您希望在用户滚动时使用AJAX加载其他内容。我建议将其他内容添加到他们已经查看的页面中（例如，附加到主div），而不是将它们转移到不同的页面。这将创造更好的用户体验。

Answer 2

使用可滚动内容绑定Scroll事件

$("#scrollableContent").scroll(function(){
    if($("#scrollableContent").position().top + $("#scrollableContent").height() == $(window).height()){
        //AJAX Call
      $("#response").load("about.html");
    }
});

Answer 3

您可以计算Div高度+滚动顶部位置，如：

var divHeight = ($("#about").height()+$("#about").scrollTop() ;

如果这大于或等于此Div内表的高度，则表示用户已到达Div的末尾。你可以加载你想要的页面。

注意：你应该在这个Div内有一张桌子。

Answer 4

您可以根据鼠标窗口位置发送ajax调用。

 var no=1;
    $(window).scroll(function () {
        if(no==1)
        {
            if ($(window).height() + $(window).scrollTop() == $(document).height()) {
                no=2;
                $.ajax({
                    type: "POST",
                    url: "about.html",
                    data: datas,
                    cache: false,
                    success: function(html){

                    }
                });
            }
        }
    });

当用户到达页面末尾时，将调用此ajax调用。您可以指定它出现的高度。

如何在用户到达底部时加载新的页面/网址

4 个答案: