我知道有插件可以延迟加载图像。我有一个优惠券代码网站，在我的分类页鞋在我的DB我有500张优惠券匹配。出于显而易见的原因，我不想显示全部500个。最初我只想显示20，然后随着用户不断向下滚动页面，它加载更多的优惠券。我该怎么做呢?
编辑:我有ajax调用工作。下面是我使用的代码:
<script type="text/javascript">
$(window).scroll(function(){
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
$('div#loadmoreajaxloader').show();
$.ajax({
url: "loadmore.php",
success: function(html){
if(html){
$("#postswrapper").append(html);
$('div#loadmoreajaxloader').hide();
}else{
$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
}
}
});
}
});
</script>
我现在的问题是如何得到正确的行从数据库每次我滚动?
在初始页面加载时，我这样做:
SELECT * FROM tblCoupons LIMIT 0,20
loadmore.php文件中的mysql调用应该是什么样子?我想我需要增加一个计数器....嗯。
这是我希望互联网上消失的一个功能…但事情是这样的-
在页面加载时，你抓取大约100个结果，或者任何你想要的结果，然后将它们吐到容器中。加载时，使用jquery记录站点上内容区域的高度。设置起始索引，这样您就知道要查询什么(显然在ajax调用中发送相关的页面数据)，获取屏幕大小并等待滚动。在滚动时，您可以检查scrollTop偏移量和窗口大小，以查看用户是否在合理的阈值范围内位于页面底部——在本例中，大约是100像素的公差。进行ajax调用，然后附加结果。
var screen_height = $('body').height();
var cur-y = $(window).scrollTop();
var screen = $(window).height();
var cur_index = 0;
然后将滚动监听器应用到body…
$('body').scroll(function(){
if($(window).scrollTop() + screen >= (screen_height - 100))
{
// make an ajax call to your server and fetch the next 100, then update
//some vars
$.ajax({
url: "your_script.php",
data: {cur_index:cur_index},
success: function(){
cur_index += 1;
screen_height = $('body').height();
// append content to your container
}
});
}
});
…基本上。这不是复制/粘贴。而更像是一个关于我过去如何做这件事的通用指南。您还应该设置条款，使此仅在每个预期事件中触发一次，因为.scroll()侦听任何滚动运动。
希望能有所帮助。