Question

我正在开发一个网站，我想在滚动页面时动态加载数据。当滚动条到达页面底部时，我想使用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>

Answer 1

当您向下滚动到页面底部时，这将监视页面并加载函数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（窗口）函数然后计算文档高度和屏幕高度并减去它们以查看用户的窗口是否已到达屏幕底部。然后将$（“＃activity_reset”）存储到标识符中供以后使用。

触发操作后，您的重置值将设置为1，以便一次不会多次触发ajax。将显示加载栏，然后为GetActivity（）函数设置超时。

$（“＃activity_reset”） - ＆gt;应该是页面上隐藏的div，其值为1或0;它应该初始化为0，当用户浏览器点击页面底部时，你的ajax调用被触发，一旦完成加载，你应该将值设置回0以允许再次加载。

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

$（“＃activity_full”） - ＆gt;另一个隐藏的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);

希望能够解决问题;让我知道。

滚动页面加载

1 个答案: