jquery实现滚动到页面底部时无限加载内容的代码
2016-06-07 17:21
916 查看
由于时间关系没有整理封装,有空的时候再把他做成一个插件。但复制下来修改一下是可以用的。以下为实例:
[javascript] view
plain copy
var p="{$other.p}";
if(p=="") p=1;
var stop=true;//触发开关,防止多次调用事件
$(window).scroll(function() {
//当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载.
if ($(this).scrollTop() + $(window).height() + 100 >= $(document).height() && $(this).scrollTop() > 100) {
if(stop==true){
stop=false;
p=p+1;//当前要加载的页码
canshu="?t={$other.t}&p="+p+"&cid={$other.cid}";
//加载提示信息
$("#showlists").append("<li class='ajaxtips'><div style='font-size:2em'>Loding.....</div></li>");
$.get("__URL__/nextpage"+canshu,function(data){
$(".ajaxtips").hide();
$("#showlists").append(data);//把新的内容加载到内容的后面
stop=true;
})
}
}
});
[javascript] view
plain copy
var p="{$other.p}";
if(p=="") p=1;
var stop=true;//触发开关,防止多次调用事件
$(window).scroll(function() {
//当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载.
if ($(this).scrollTop() + $(window).height() + 100 >= $(document).height() && $(this).scrollTop() > 100) {
if(stop==true){
stop=false;
p=p+1;//当前要加载的页码
canshu="?t={$other.t}&p="+p+"&cid={$other.cid}";
//加载提示信息
$("#showlists").append("<li class='ajaxtips'><div style='font-size:2em'>Loding.....</div></li>");
$.get("__URL__/nextpage"+canshu,function(data){
$(".ajaxtips").hide();
$("#showlists").append(data);//把新的内容加载到内容的后面
stop=true;
})
}
}
});
相关文章推荐
- jquery控制复选框
- jquery为多个元素添加事件
- 11个好用的jQuery拖拽拖放插件
- [转]Hide or Remove jquery ui tab based on condition
- jQuery获取表格中一行的值和获取重复ID的值
- jquery给easyui-window的title赋值
- jquery实现返回顶部、底部功能
- 基于jQuery下拉选择框插件支持单选多选功能代码
- jQuery原理系列-css选择器的简单实现
- jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position
- jQuery深入之源码解析(四)——分离构造器
- web前端复习(一):jquery实现轮播
- jQuery 如何先创建、再修改、后添加DOM元素
- jQuery.Autocomplete实现自动完成参数详解
- jQuery原理系列-常用Dom操作详解
- 浅谈jQuery 选择器和dom操作
- DOM操作和jQuery实现选项移动操作的简单实例
- 基于jQuery下拉选择框插件支持单选多选
- jQuery 数据 - jQuery.data() 方法
- jQuery中attr和prop的区别