Ajax 滚动异步加载数据

最新推荐文章于 2024-08-27 15:59:21 发布
最新推荐文章于 2024-08-27 15:59:21 发布
阅读量99 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/fuchuanzhipan1209/p/8435222.html
版权

第一种情况：单个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

weixin_34309543
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ThinkCMF中如何实现ajax异步加载
u011222372的博客
03-24 3864
ThinkCMF确实是一个简单直接的内容管理系统，里面的功能也非常完善，用过之后确实让人感觉很直接，尤其是其分页类，也非常完善。 因为项目原因，要在手机端实现异步加载的功能，而对于ThinkCMF来说，异步加载等同于最后一个p参数值的加载，在这个引导下写了一个很简陋的demo。 首先获取文章列表、分页<?php $cid = $cat_id; $tag = "cid:$cid";
Ajax异步加载数据
Massimo__JAVA的博客
07-03 172
Ajax异步加载数据
当滚动条滑动时ajax,当滚动条滚动到某元素时触发函数
weixin_33344629的博客
08-05 187
#showIt{width: 200px;height: 200px;background-color: red;position: absolute;top: 1500px;}document.onscroll=function(){var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;var cHei...
ajax滚动预加载,无限滚动的优化方案(一)：预加载实现
weixin_30545945的博客
08-06 495
最近看了很多关于无限滚动的文章，也在面试中被问到了，优化方案很多，本次针对其中一条优化方案做了一个实际的优化：预加载。实例简介之前一直对单页应用有兴趣，所以自己写了一个前端路由，相关的文章见这里，这个单页应用采取hash的方式实现路由。最终的实例页面见这里。仓库在这里是一个经典的单页应用。要做优化的就是主页的信息滚动。这些信息通过ajax从服务器端获取，这里为了方便，服务器端会一直返回数据，哪怕是...
ThinkCMF内容管理框架 5.0.180901.zip
05-25
ThinkCMF是一款基于ThinkPHP MySQL开发的中文内容管理框架(CMF)，我们一直秉承ThinkPHP大道至简的理念，坚持做最简约的ThinkPHP开源软件，多应用化开发方式，让您更快地完成自己的创业项目。 ThinkCMF 5.0.180901 更新日志： 增强模板设计，提供可视化模板设计；增加模板设计界面钩子；增加验证码图片钩子；增加后台设置网站信息界面钩子；增加后台清除缓存界面钩子；增加后台导航管理界面钩子；增加后台友情链接管理界面钩子；增加后台幻灯片管理界面钩子；增加后台幻灯片页面列表界面钩子；增加后台幻灯片页面添加界面钩子；增加后台幻灯片页面编辑界面钩子；增加后台管理员列表界面钩子；增加后台管理员添加界面钩子；增加后台管理员编辑界面钩子；增加后台角色管理界面钩子；增加后台角色添加界面钩子；增加后台角色编辑界面钩子；增加后台角色授权界面钩子；增加用户管理本站用户列表界面钩子；增加资源管理列表界面钩子；增加用户管理第三方用户列表界面钩子；增加后台首页界面钩子；增加后台回收站界面钩子；增加后台菜单管理界面钩子；增加后台自定义登录是否开启钩子；增加admin.jsjs-ajax-btn组件；优化插件加载；优化前后台上传js。[门户应用]增加文章音频，视频功能；增加门户后台文章管理列表界面钩子；增加门户后台文章添加界面钩子；增加门户后台文章编辑界面钩子；增加门户后台文章分类管理列表界面钩子；增加门户后台文章分类添加界面钩子；增加门户后台文章分类编辑界面钩子；增加门户后台页面管理列表界面钩子；增加门户后台页面添加界面钩子；增加门户后台页面编辑界面钩子；增加门户后台文章标签管理列表界面钩子；增加门户后台文章添加编辑界面右侧栏钩子；增加门户后台文章添加编辑界面主要内容钩子；增加后台文章分类显示隐藏功能；增加后台文章分类列表搜索功能；增加后台文章分类列表层级折叠功能。
jquery滚动页面底部时ajax加载多次解决办法
dnpao的专栏
08-11 8745
var isbool=true;//触发开关，防止多次调用事件 $(window).scroll(function() { if (($(this).scrollTop() + $(window).height()) >= $(document).height() && isbool==true) { isbool=false; $.get("url",func
ajax 滚动加载
storeWugt的博客
02-02 519
var page = 2; var sover = 0; window.onscroll = function () { if(window.innerHeight + $(document).scrollTop()==document.body.scrollHeight){ if(this.sover==0){    //触发ajax事件获取记录        $.ajax({ t
jQuery Ajax 加载数据时异步显示加载动画
10-21
在本文中，我们将详细探讨如何在使用jQuery的Ajax加载数据时，异步显示加载动画。 首先，我们要了解的是HTML中的元素布局。在页面上设置一个用于显示加载动画的区域至关重要，通常这个区域包含了一个图片元素。在这...
浏览器窗口滚动加载数据采用异步形式从后台加载数据
10-26
浏览器窗口滚动加载数据是一种常见的优化网页性能的技术，特别是在处理大量数据或无限滚动的网页中。这种技术通常被称为“懒加载”或“无限滚动”，它允许用户在浏览页面时，只有当他们接近页面底部时，才会从服务器...
滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨
10-27
在探讨如何使用滑轮滚动到页面底部实现数据的异步加载时，我们通常需要利用AJAX技术配合JSONP来完成。这个过程涉及以下几个关键知识点： 1. 页面滚动判断：要实现滚动加载数据，首先需要判断用户是否滚动到了页面的...
上拉滚动条 异步加载组件
12-01
5. **异步加载数据**：`loadMoreData()`函数通常会发送一个Ajax请求，获取更多数据，然后将这些数据添加到滚动容器中。记得更新`iScroll`实例以反映新的内容。 ```javascript function loadMoreData() { $.ajax({ ...
Python使用Selenium爬取淘宝异步加载的数据方法
09-19
通过以上步骤，我们可以有效地使用Python和Selenium来爬取淘宝网站上的异步加载数据。这种方式不仅解决了页面复杂性带来的问题，还能够灵活地应对各种页面结构变化。此外，结合MongoDB进行数据存储，可以方便后续的...
thinkcmf中使用iframe
slpond的博客
11-29 1262
--------------------------------------------------代码实现详解------------------------------------------------------------- 父页：father.html
Ajax动态滚动加载数据
热门推荐
旋转木马的IT小窝
09-22 1万+
看新浪微博，人人网都有这样的效果：滚动条滚动到最下面的时候，新的数据就被自动加载出来了，今天亲自尝试了一下这个效果的实现。 首先，准备一个分页的存储过程： CREATE PROCEDURE proctest @pagesize INT, @pagenumber INT AS SELECT * FROM ( SELECT ROW_NUMBER()OVER (ORDER B
jQuery.on() 函数详解
chelen_jak的专栏
02-27 830
转自：http://www.365mini.com/page/jquery-on.htm on()函数用于为指定元素的一个或多个事件绑定事件处理函数。 此外，你还可以额外传递给事件处理函数一些所需的数据。 从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。
ThinkCMF框架使用 - 如何创建应用 -1
IT部落格
03-13 4109
什么应用1.应用就是application目录下的一个模块，它是独立于其它模块存在的，有自己独立的运行空间； 2.应用采用MVC的结构: 3.拿Blog应用举例: Blog Controller 控制器目录（必备） Common 函数库（可选） Conf 配置（可选） Lang 多语言包（可选） Menu 后台菜单（可选）
滚动条触发的内容动态加载效果
张庆（网眼）
07-29 1738
    效果介绍文章：分页加载数据效果的新颖改进：    http://blog.why100000.com/?p=823    技术细节：jQuery 的 Div 标签滚动条属性及判断垂直滚动条是否到达底部：    http://blog.why100000.com/?p=843    开发环境：jQuery1.4.2，Ajax，PHP5.2.5。    测试环境：IE7、I
JavaScript代码片段
weixin_66128399的博客
08-26 521
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
最新发布
h2345678的博客
08-27 776
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
ajax 滚动加载 scrapy
09-05
可以通过观察网站的网络请求，查看是否有异步请求加载数据。 2. 在Scrapy中，可以使用Splash等工具来模拟浏览器行为，并执行JavaScript代码来实现AJAX加载。 3. 在Scrapy爬虫中，可以使用selenium或者Scrapy-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值