php 滚动加载 js,jquery浏览器滚动加载技术实现方案

曾经终败给现在 2022-11-12 10:57 256阅读 0赞

要知道，数据量增加很频繁时，要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据，尤其是浏览最新的数据，利用浏览器滚动条来加载，是很好的尝试……

我试着用jquery来实现这个功能。先要得到滚动条的总长属性值：scrollHeight，还有滚动条当前位置属性值：scrollTop。然后通过计算，若当前值位于总长值三分之二时加载新数据。假设DOM上有一个元素为

var hght=0;//初始化滚动条总长

var top=0;//初始化滚动条的当前位置

$(document).ready(function()\{//DOM的onload事件

$(”\#mypage”).load(”table.html”);//table.html的内容被加载到mypage元素

$(”\#mypage”).scroll( function() \{//定义滚动条位置改变时触发的事件。

hght=this.scrollHeight;//得到滚动条总长，赋给hght变量

top=this.scrollTop;//得到滚动条当前值，赋给top变量

\});

\});

setInterval(”cando();”,2000);//每隔2秒钟调用一次cando函数来判断当前滚动条位置。

function cando()\{

if(top>parseInt(hght/3)\*2)//判断滚动条当前位置是否超过总长的2/3，parseInt为取整函数

show();//如果是，调用show函数加载内容。

\}

function show()\{

$.get(”table.html”, function(data)\{//利用jquery的get方法得到table.html内容

$(”\#mypage”).append(data);//用append方法追加内容到mypage元素。

hght=0;//恢复滚动条总长，因为$(”\#mypage”).scroll事件一触发，又会得到新值，不恢复的话可能会造成判断错误而再次加载……

top=0;//原因同上。

\});

\}

为什么要隔2秒钟调用一次判断呢？因为只要$(”\#mypage”).scroll事件一被触发，就会影hght和top值，这个值可能总是满足cando函数的判断，也就是top值总是位于hght的三分之二。因此可能会多次加载造成服务器负担加重。而每加载一次后把hght和top值赋0，也是这个原因。

这段代码的效果就是只要元素mypage的滚动条位置位于滚动条总长的三分之二时，追加table.html的内容到元素mypage中去。当然这样运行是无休止地加载下去。在真正的AJAX运用中，table.html可以换成asp或php脚本，接收get或post参数来进行处理，然后返回有意义的数据。jquery的get方法可以设置get方式的参数数据，比如：

$.get(”test.php”, \{ name: “boho”, id: “1″ \} );

相当于http://localhost/test.php?name=boho&id=1这种形式的http访问。然后通过get方法的回调函数来获取test.php输出的内容：

$.get(”test.php”, \{name:”boho”,id:”1″\},function(data)\{

alert(”Data Loaded: ” + data);

\});

发表评论取消回复

表情：

评论列表（有 0 条评论，256人围观）

还没有评论，来说两句吧...

相关阅读

相关 js滚动加载

迎大家一起交流学习n(\*≧▽≦\*)n 效果： ![20190910110637264.gif][] **html** <div> <d...

Dear 丶/ 2024年04月18日 17:30/ 0 赞/ 83 阅读

相关 Vue组件滚动加载、懒加载功能的实现，无限滚动加载组件实例演示

效果图如下：可以看到随着不断的滚动，页面组件的数量不断的加载。其实加载的是后端返回的数据，因为涉及隐私，没有给显示出来。利用懒加载，可以防止大量渲染造成卡顿降

约定不等于承诺〃/ 2024年03月27日 14:51/ 0 赞/ 91 阅读

相关 vue 滚动加载

![ba1b4a3943a24dc1b5b6fbcec50e2915.jpeg][] 在 Vue中，如果一个组件是一个 button，那就可以直接调用 input

港控/mmm°/ 2023年10月12日 09:03/ 0 赞/ 56 阅读

相关 php+html+js+滚动加载,jQuery局部div滚动加载远程数据

之前我们介绍了浏览器滚动条远程加载数据http://www.sucaihuo.com/js/9.html，这次我们介绍PHP+mysql局部div鼠标滚轮远程加载数据 ![b

布满荆棘的人生/ 2023年01月16日 04:50/ 0 赞/ 200 阅读

相关 php 滚动加载 js,jquery浏览器滚动加载技术实现方案

要知道，数据量增加很频繁时，要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据，尤

曾经终败给现在/ 2022年11月12日 10:57/ 0 赞/ 257 阅读

相关 jquery实现浏览器滚动加载

var totalheight = 0; $(function(){ $(window).bind("sc

女爷i/ 2022年08月07日 03:41/ 0 赞/ 302 阅读

相关滚动加载

由于网页的执行都是单线程的，在JS执行的过程中，页面会呈现阻塞状态。因此，如果JS处理的数据量过大，过程复杂，可能会造成页面的卡顿。传统的数据展现都以分页的形式，但是分页的效果

比眉伴天荒/ 2022年05月28日 01:37/ 0 赞/ 301 阅读

相关滚动条滚动异步加载数据

<script type="text/javascript"> //获取列表中的原有内容 var content=document.get

待我称王封你为后i/ 2022年05月24日 07:15/ 0 赞/ 445 阅读

相关滚动加载图片（懒加载）实现原理

本文主要通过以下几方面来说明懒加载技术的原理，个人前端小菜，有错误请多多指出一、什么是图片滚动加载？　　通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的

﹏ヽ暗。殇╰゛Y/ 2022年05月17日 05:35/ 0 赞/ 377 阅读

相关滚动加载图片（懒加载）实现原理

本文主要通过以下几方面来说明懒加载技术的原理，个人前端小菜，有错误请多多指出一、什么是图片滚动加载？通俗的讲就是：当访问一个页面的时候，先把`img`元素或是其他元

àì夳堔傛蜴生んèń/ 2021年06月26日 16:06/ 0 赞/ 706 阅读