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) }});})
转载于:https://www.cnblogs.com/fuchuanzhipan1209/p/8435222.html
Ajax 滚动异步加载数据相关推荐
- ajax实现向上正在加载,向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
- SharePoint 实现ajax异步加载数据的几种方式
初到公司,由原想的asp.net开发转向了SharePoint(简称SP)开发,个人感觉与之前差别不大,今天用sp实现异步加载数据的时候遇到点问题,之前在asp.net下一步都是用 jquery.aj ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- 新手教程:不写JS,在MIP页中实现异步加载数据
从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...
- JQuery Datatables 动态配置参数异步加载数据
背景需求 在前端动态设置datatables需要传递到后端的查询参数,异步加载返回的数据.点击这里进入datatables中文网异步加载数据说明 直接上代码 var table; var url = ...
- highcharts.js两种数据绑定方式和异步加载数据的使用
一,我们先来看看异步加载数据的写法(这是使用MVC的例子) 1>js写法 <script src="~/Scripts/jquery-2.1.4.min.js"> ...
- 可视化 | Echarts基础异步加载数据交互组件数据集
目录 1. ECharts 简介 2. ECharts 安装 3. ECharts 配置语法 4. ECharts 图饼 5. ECharts 样式设置 6. ECharts 异步加载数据 7. EC ...
- SpringMVC--Ajax异步加载数据$(function (){ 逻辑代码}) 的意思是让dom结构加载完毕后再去执行逻辑代码
1. SpringMVC–Ajax异步加载数据 1.1 实体类user User.java package com.tian.pojo;import lombok.AllArgsConstructor ...
- 学习下ECharts 异步加载数据
ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项就行. ECharts 通常数 ...
最新文章
- 一文让你完全弄懂逻辑回归和分类问题实战《繁凡的深度学习笔记》第 3 章 分类问题与信息论基础(上)(DL笔记整理系列)
- JSP内置对象-response
- 天体摇摆仪的工作原理
- Word组件 Spire.Doc for .NET V6.0.3发布 | 修复多个重大bug
- 打不开开php_(13)10个开源免费的PHP博客CMS
- 分布式缓存memcached
- FFMpeg框架代码阅读
- java遍历字典_Java中的HashMap遍历和C#的字典遍历
- putty怎么拷贝Linux下的日志,linux 下的 putty 如何复制与粘贴?
- 单片机原理与应用技术
- 加速计(重力感应功能)的使用
- 大秦帝国------令人神往的时代
- 360木马查杀后mysql数据不能启动
- android 视频、图片混合轮播控件zbanner
- gtx1660是什么级别的_GTX1660相当于什么显卡 三月显卡天梯图秒懂GTX1660性能
- 什么是CRM系统,它如何支持客户营销管理?
- 编译原理中的first集,follow集和selec集的小解
- 网易云对象存储获取私有对象下载链接打不开的问题
- java_系列3_数组
- 【爬虫专栏18】多线程爬笔趣阁遮天