0

我正在开发一个网站，我想在滚动页面时动态加载数据，当滚动条到达页面底部时，我想使用 AJAX 从数据库中加载更多数据。

在我的网页中有一个 iframe，我想在其中附加新数据。就像 Flipkart.com 网站一样。滚动页面时加载新产品的位置。

有人可以在这方面帮助我吗？

提前致谢。

我已经尝试了很多次，但没有运气，我得到的只是调用 GetActivity() 时，当我向下滚动时它也不调用 GetActivity()，但是当我从那一点向上滚动时，它调用 javascript 函数 GetActivity （）并且在重复这一点时，它在这里不起作用的是我使用的代码，由 Greg 给出：请查看并提供帮助。

<html>
<head>
<script type="text/javascript" src="jQuery-1.4.1-min.js"></script>
<script type="text/javascript">
$(window).scroll(function() {
    var bottom = getBottom(window),
        $reset = $("#activity_reset");
    if (bottom == $(this).scrollTop() && $reset.val() == 0) {
        $reset.val(1);
        $("#activity_loading").show();
        if ($("#activity_full").val() == 0) {
            setTimeout("GetActivity();", 100);
        }
    }
});
function getBottom(e) {
    height          = $(document).height();
    windowheight    = $(e).height();
    return height - windowheight;
}
function GetActivity()
{
alert("got it!");
$('div.tt').html('1');
$('div.ttt').html('1');
}
function setting()
{
$('div.tt').html('0');
$('div.ttt').html('0');
}
</script>
</head>
<body onload="return setting()" >
<pre>
<!--here i have used some junk texts so that a scroll bar appears in the browser-->
</pre>
<div style="display:none" id="activity_full" class="ttt"></div>
<div style="display:none" id="activity_reset" class="tt"></div>
</body>
</html>
4

1 回答 1

2

这将监视页面并在您向下滚动到页面底部时加载函数 GetActivity()；你可以把你的ajax调用放在那里并相应地编辑它以显示你希望出现在页面上的数据。

$(window).scroll(function() {
    var bottom = getBottom(window),
        $reset = $("#activity_reset");

    if (bottom == $(this).scrollTop() && $reset.val() == 0) {
        $reset.val(1);
        $("#activity_loading").show();

        if ($("#activity_full").val() == 0) {
            setTimeout("GetActivity();", 1000);
        }
    }
});

function getBottom(e) {
    height          = $(document).height();
    windowheight    = $(e).height();

    return height - windowheight;
}

function GetActivity() {
    /* ajax call in here */
}

当窗口滚动时 .scroll(function()) 被触发；getBottom(window) 函数然后计算文档高度和屏幕高度并减去它们以查看用户的窗口是否已到达屏幕底部。然后将 $("#activity_reset") 存储到标识符中以供以后使用。

一旦触发动作，您的重置值将设置为 1，这样 ajax 就不会一次触发多次。显示加载栏，然后为 GetActivity() 函数设置超时。

$("#activity_reset") -> 应该是页面上的隐藏 div，其值为 1 或 0；它应该被初始化为 0，当用户浏览器点击页面底部时，您的 ajax 调用被触发，一旦加载完成，您应该将值设置回 0 以允许再次加载。

$("#activity_show") -> 应该是页面上包含加载图像的隐藏 div，或者只是说明正在加载某些内容的文本（不是必需的，但肯定有助于用户体验）。

$("#activity_full") -> 是另一个隐藏的 div，用于识别您的 div 何时已满并且不应再加载内容。它应该初始化为 0，当您加载了尽可能多的项目时，您可以将其设置为 1（可能在您的 GetActivity() 函数中）以防止进一步加载。

进一步解释： 在 GetActivity() 函数内部更改以下内容：

$('div.tt').html('1');
//returns <div class="tt">1</div>

到

$('div.tt').val(1);
//returns <div class="tt" value="1"></div>

您的代码将 div 的 html 设置为 1，而您真正想要的是 value 属性等于 1，因为这是脚本在比较中检查的内容。我还注意到您也将 $('div.ttt') 设置为 1，但这将阻止脚本进一步加载。仅当满足条件并且您不再希望加载任何项目时，才应将此设置为 1。

$num = 6; //number of items per page
if($num == 6)
    $('div.ttt').val(1);

希望这能说明问题; 让我知道。

于 2012-09-25T14:55:36.427 回答