Ajax 滚动异步加载数据
第一种情况:单个div滚动
HTML
<body>
<!-- search start -->
<div class="search" #if($m_o_d_e == "nightmode") style="background: #2e2e2e;" #end>
<a onclick="firstSearch()"><b></b>搜索</a>
</div> <a href="javascript:;" class="moveTop" id="movetop"></a>
<div class="domainBook">
<div class="domainNav swiper-container">
<ul class="swiper-wrapper">
<li>左侧导航<li>
li>左侧导航<li>
li>左侧导航<li>
</ul>
</div>
<div class="domainCon slideHeight">
<!--滚动div-->
<div class="groupM autoHeight">
<ul id="subjectUl"></ul>
<div class="pullUp" id="btu"></div>
</div> </div>
</div> </body>
Javascript
$("document").ready(function(){ //滚动监听事件
$(".slideHeight").scroll(function(){
var nScrollHight = $(this)[0].scrollHeight;
var nScrollTop = $(this)[0].scrollTop;
var nDivHight = $(".slideHeight").height(); if(nScrollTop + nDivHight >= nScrollHight){
$("#btu").html('<span class="pullUpIcon"></span>正在加载...');
getMore(channelId); //AJAX加载数据(到subjectUl)
} });
第二种情况:整个页面滚动
HTML
<body>
<a href="javascript:;" class="moveTop" id="movetop"></a>
<!--滚动部分start-->
<div class="groupM slideHeight">
<ul id="subjectUl"></ul>
<div class="pullUp" id="btu"></div>
</div> </body>
Javascript
$(function(){
//滚动监听事件
$(window).scroll(
function () {
/*当前滚动条到顶部的距离*/
var top = $(document).scrollTop();
/*当前浏览器的可视高度*/
var height = document.body.clientHeight;
/*当前网页(body)的高度*/
var z_height = $(document).height();
/*判断(网页的body高度减去当前浏览器的可视高度是否等于滚动条到顶部的距离)
* 相等:则判定当前页面在底部
* 不相等:判定当前页面不在底部
* */
var stats = ( z_height - height-top == 0) ;
if (stats) {
/*当前网页在最底部,执行该函数*/
$("#btu").html('<span class="pullUpIcon"></span>正在加载...');
More();//AJXA异步加载数据(到subjectUl)
}
}
); })
Ajax 滚动异步加载数据的更多相关文章
- js滚动异步加载数据的思路
<body> <div style="width:200px; height:1000px; border:1px solid red;" id="to ...
- 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- Jquery zTree结合Asp.net实现异步加载数据
zTree结合Asp.net实现异步加载数据 实现简单操作 zTree 下载 api 访问 :http://www.ztree.me/v3/main.php 例子中用到json数据转化 newtons ...
- 新手教程:不写JS,在MIP页中实现异步加载数据
从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...
- iScroll.js 向上滑动异步加载数据回弹问题
iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ ...
- highcharts.js两种数据绑定方式和异步加载数据的使用
一,我们先来看看异步加载数据的写法(这是使用MVC的例子) 1>js写法 <script src="~/Scripts/jquery-2.1.4.min.js"> ...
- ajax按楼层加载数据
代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...
随机推荐
- [Leetcode]146.LRU缓存机制
Leetcode难题,题目为: 运用你所掌握的数据结构,设计和实现一个 LRU (最近最少使用) 缓存机制.它应该支持以下操作: 获取数据 get 和 写入数据 put . 获取数据 get(key ...
- supervisor 管理uwsgi 进程
Supervisor是用Python开发的一套通用的进程管理程序,能将一个普通的命令行进程变为后台daemon,并监控进程状态,异常退出时能自动 重启.它是通过fork/exec的方式把这些被管理的进 ...
- 06-03 Java 面向对象思想概述、开发设计特征,类和对象的定义使用,对象内存图
面向对象思想概述.开发设计特征 1:面向对象思想 面向对象是基于面向过程的编程思想. 面向过程:强调的是每一个功能的步骤 面向对象:强调的是对象,然后由对象去调用功能 2:面向对象的思想特点 A:是一 ...
- java基本语法三
1 程序流程控制 流程控制语句是用来控制程序中各语句执行顺序的语句,可以将语句组合完成能完成一定功能的小逻辑模块. 流程控制方式采用结构化程序设计中规定的三种基本流程,即: ①顺序结构: 程序从上到下 ...
- (转)Db2 数据库性能优化中,十个共性问题及难点的处理经验
(转)https://mp.weixin.qq.com/s?__biz=MjM5NTk0MTM1Mw==&mid=2650629396&idx=1&sn=3ec17927b3d ...
- 关于C++11中的std::move和std::forward
std::move是一个用于提示优化的函数,过去的c++98中,由于无法将作为右值的临时变量从左值当中区别出来,所以程序运行时有大量临时变量白白的创建后又立刻销毁,其中又尤其是返回字符串std::st ...
- 全网最详细的Windows系统里PLSQL Developer 64bit的下载与安装过程(图文详解)
不多说,直接上干货! ORACLE是数据库,有客户端和服务器: 其,具体下载,可见http://www.oracle.com/technetwork/database/enterprise-editi ...
- java学习碰到死胡同了
一个月前看了java的异常处理,有点凌乱,各种异常好不习惯,特别是那个throws和throw,现在好多了,编程中使用打异常抛出没啥问题了,只是线程和输出输入流又遇到问题了,线程刚学,了解了Threa ...
- 插入排序:直接插入排序&希尔排序
一.直接插入排序 1. 思想 直接排序法, 可以分为两个部分, 一部分是有序的, 一部分是无序的. 从这个图上, 应该是能看清楚直接插入排序的思想了. 将无序部分的第一个与有序部分进行比较. 从有序部 ...
- CentOS Basic XLib functionality test failed!
在CentOS上安装个Qt库时,下好源代码之后执行: ./configure检查环境时,出现: Basic XLib functionality test failed! You might need ...