JQuery页面随滚动条动态加载效果的简单实现(推荐)

Google阅读器上有一个AJAX scollLoad效果很不错，就是阅读项目时不需要翻页，浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来，一直到所有项目加载完为止。要知道，数据量增加很频繁时，要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据，尤其是浏览最新的数据，利用浏览器滚动条来加载，是很好的尝试……

我试着用jquery来实现这个功能。先要得到滚动条的总长属性值：scrollHeight，还有滚动条当前位置属性值：scrollTop。然后通过计算，若当前值位于总长值三分之二时加载新数据。假设DOM上有一个元素为，该元素overflow样式为scroll，也就是元素中的内容溢出元素指定高度时启用滚动条。利用jquery的load方法为元素加载一个已经存在的文件，我假设它是table.html。这个文件的内容可以是足以使浏览器滚屏的一张数据表。

jquery.js“>// 加载jquery库

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://hostlocal/test.php?name=boho&id=1

这种形式的http访问。然后通过get方法的回调函数来获取test.php输出的内容：

$.get(”test.php”, {name:”boho”,id:”1″},function(data){
alert(”Data Loaded: ” + data);
});

以上这篇JQuery页面随滚动条动态加载效果的简单实现(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery实现页面滚动时动态加载内容的方法

    本文实例讲述了jQuery实现页面滚动时动态加载内容的方法.分享给大家供大家参考.具体分析如下: 很多网站,比如twitter,京东商城首页,会在页面滚动到一定的位置时才动态加载页面内容,这样可以加快页面打开的速度,也可以节约带宽,下面的JS代码就可以帮你做到. var loading = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).hei

  • js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 $(window).scroll(functi

  • PHP实现简单ajax Loading加载功能示例

    本文实例讲述了PHP实现简单ajax Loading加载功能.分享给大家供大家参考,具体如下: var xmlHttp; function createXmlHttpReq() { if(window.ActiveXObject) { xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); } else if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function fu

  • jQuery+PHP+ajax实现微博加载更多内容列表功能

    在一些微博网站上我们经常可以看到这样的应用,微博内容列表上并没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文将结合jQuery和PHP给大家讲述如何实现这种功能. Ajax加载的基本原理:当页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"查看更多"的链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作

  • 使用PHP+AJAX让WordPress动态加载文章的教程

    为什么要动态加载文章? 1. 快速向访客展示页面 文章很容是包含大量文字和多媒体资源 (如: 图片, 视频, 音乐), 加载这些内容需要占用很多的时间. 如果你的页面上存在大量文章, 当访客发现页面久久没有加载完成就感到不耐烦. 这是动态加载文章的主要目的. 2. 让文章列表化 使页面上的文章成为一个列表, 减少页面的空间占用, 访客可以方便的移动到页面下方, 提高旧文章被点击的几率. 并且你可以在页面上放置更多的文章而不用担心页面过长. 为什么不动态加载文章? 1. 对搜索引擎不友好 搜索引擎

  • PHP+jQuery实现滚屏无刷新动态加载数据功能详解

    本文实例讲述了PHP+jQuery实现滚屏无刷新动态加载数据功能.分享给大家供大家参考,具体如下: index.php <?php require_once('connect.php'); //连接数据库 $user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模拟了几个用户 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

  • PHP通过反射动态加载第三方类和获得类源码的实例

    使用反射动态加载第三方类 用反射加载第三方类用处在于: 使用XML或其他配文件配置要加载的类,从而和系统源代码分离. 对加载的类进行类检查,是加载的类符合自己定义的结构. <?php abstract class Module { #核心Module类库 function baseFunc() { echo "I am baseFunc"; } abstract function execute(); } class ModuleRunner { private $configD

  • php+ajax+jquery实现点击加载更多内容

    我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文我将结合jQuery和PHP给大家讲述如何实现这种应用. 基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录

  • php+ajax实现无刷新动态加载数据技术

    我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术应用得淋漓尽致. 滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用.本文将使用jQuery,结合PHP,mysql以及JS

  • JQuery页面随滚动条动态加载效果的简单实现(推荐)

    Google阅读器上有一个AJAX scollLoad效果很不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止.要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有什么意义.我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据.至于浏览数据,尤其是浏览最新的数据,利用浏览器滚动条来加载,是很好的尝试-- 我试着用jquery来实现这个功能.先要得到滚动条的总长属性值:scrollHeight

  • jQuery zTree树插件动态加载实例代码

    需求: 由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 zTree.init方法进行数据加载,将所有数据一次性加载到页面中.而在项目中家谱级别又非常广而深,成千上万级,因此一次加载,完全加载不出来.于是需要进行优化为动态加载(增量加载)的方式,以便数据加载,提高体验度. 解决断路: 这应该好办,只要找到父节点单击事件,然后进行数据加载,结点附加即可.时间紧,任务重,完全没给研究的时间.只能硬着上,随便搜索一个"zTree动态加载",出是出来了,标题也对,可里面的代码根本没

  • 滚动条的监听与内容随着滚动条动态加载的实现

    实例如下: <!DOCTYPE html> <html> <head> <title>当滚动条滑到底部时自动加载内容</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <style type="text/css"> body{ background-color:

  • jquery及js实现动态加载js文件的方法

    本文实例讲述了jquery及js实现动态加载js文件的方法.分享给大家供大家参考,具体如下: 问题: 如果用jquery append直接加载script标签的话,会报错的.除了document.write外,还有没有其他的比较好的动态加载js文件的方法. 解决方法: 1.jquery方法 $.getScript("./test.js"); //加载js文件 $.getScript("./test.js",function(){ //加载test.js,成功后,并执

  • jQuery实现的瀑布流加载效果示例

    jQuery实现的瀑布流加载效果示例

    本文实例讲述了jQuery实现的瀑布流加载效果.分享给大家供大家参考,具体如下: demo.js: $(function(){ $('img').load(function(){ var box = $('.box'); var boxHeight = { leftBox:[], centerBox:[], rightBox:[] } for(var i=0;i<box.length;i++){ var now = i%3; //now的值为0,1,2 switch(now){ case 0:

  • vue 使用async写数字动态加载效果案例

    父组件 <interval-number :number-content="blockHeight" v-if="blockHeight>0"></interval-number> import IntervalNumber from './IntervalNumber.vue' components:{ IntervalNumber, } 子组件 <template> <span class="Interv

  • java 利用java反射机制动态加载类的简单实现

    如下所示: ////////////////// Load.java package org.bromon.reflect; import java.util.ArrayList; import java.util.List; public class Load implements Operator { @Override public List<?> act(List<?> params) { // TODO Auto-generated method stub List<

  • jQuery实现根据滚动条位置加载相应内容功能

    jQuery实现根据滚动条位置加载相应内容功能

    实现jQuery根据滚动条位置加载相应的内容:向下滚动时当内容区域滚动到可视窗口高度的一半时,加载动画内容:向上滚动到相应的内容区域时也重新加载动画内容! 1.实现思路: 先静态布局好HTML结构,使用伪类:hover模拟动画效果,再使用jQuery 控制动画类名的切换来实现效果!主要判断滚动的方向,以及相应方向上加载动画的时机(即何时才加载动画的判断条件!关键点!). 2.思维草稿图: 向下滚动加载动画判断条件:(代码中addClass()函数) 向上滚动加载动画判断条件:(代码中addCla

  • 动态加载js文件简单示例

    本文实例讲述了动态加载js文件的方法.分享给大家供大家参考,具体如下: function loadScript(url){ var hd = document.getElementsByTagName('head')[0], js = document.createElement('script'); js.src = url; js.type = "text/JavaScript"; if(js.addEventListener){ js.addEventListener("

随机推荐