jquery 实现滚动条下拉时无限加载的简单实例

思路:

通过捕捉浏览器滚动条下拉事件,触发异步加载数据的js方法,实现数据的动态添加。

脚本:

var lastId=0;//记录每一次加载时的最后一条记录id,跟您的排序方式有关。

  var isloading = false;
  $(window).bind("scroll", function () {
    if ($(document).scrollTop() + $(window).height() 

       > $(document).height() - 10 && !isloading) {
      isloading = true;
      getMore();
    }
  });

function getMore() {
    var url = "ajaxdata.aspx"?lastId=" + lastId +"&type=" + 其他参数
    $.getJSON(url, function (data) {
      var html="";

       ... ...

      $(html).insertAfter($(".elem").last());
      isloading = false;
    }

  }

以上这篇jquery 实现滚动条下拉时无限加载的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2016-05-30

jQuery实现模仿微博下拉滚动条加载数据效果

本文实例讲述了jQuery实现模仿微博下拉滚动条加载数据效果.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>滚动条距离底部</title> <script src="jquery-1.6.2.min.js" type="text/javascript&

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

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

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

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

拉动滚动条加载数据的jquery代码

复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>拉动滚动条加载数据</title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> &l

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

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

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

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

基于jquery实现页面滚动到底自动加载数据的功能

现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由于它每次只加载一部分数据,当我们有大量的数据,但不能显示所有,这时我们可以考虑使用异步方式加载数据. 数据异步加载可以发生在用户点击"查看更多"按钮或滚动条滚动到窗口的底部时自动加载:在接下来的博文中,我们将介绍如何实现自动加载更多的功能. 图1 微博加载更多功能 正文 假设,在我们的数据库中存放着用户的消

jQuery实现滚动到底部时自动加载更多的方法示例

本文实例讲述了jQuery实现滚动到底部时自动加载更多的方法.分享给大家供大家参考,具体如下: 这里利用AJAX,实现滚动到底加载数据功能: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/

基于jquery实现页面滚动时顶部导航显示隐藏

本文实例讲述了jquery实现页面滚动时顶部导航显示隐藏效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 引入核心文件 <script src="js/jquery/1.11.1/jquery.min.js"></script> 构建html,margint这个div中为了出现滚动条而建,并无实际作用. <div class="top-title">这是顶部导航条</div> <di

jQuery实现页面滚动时层智能浮动定位实例探讨

各位兄弟可能碰到定位的问题,特别是在博客或者微博上面也会见到这个效果,于是产品人员在策划的时候就会要人家那种效果,,,而苦逼的我们需要去实现,实现实现.....没办法,谁让我们是攻城师呢,攻吧: 效果图如下,滚动条下拉的时候黑色的块TOP为0:固定显示: 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html > <head> <title>jQuery实现页面滚动时层智能浮动定位</title> <meta name

jQuery实现页面滚动时智能浮动定位

话不多说,请看代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现页面滚动时层智能浮动定位_前端开发</title> <style type="text/css"> * { mar

js实现动态加载脚本的方法实例汇总

本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法,讨厌其中拷贝别人成果的人,也不加个原文的链接.哎!关键是最后一种方法还有点错误.经过两天的研究查阅资料,在这里和大家分享一下. 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在

DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)

Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 主要功能 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns -- 丰富多样的option和强大的API 支持国际化 超过2900+个单元测试 免

flutter 轮播图动态加载网络图片的方法

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费.开源的. Swiper,网上很多例子只是加载固定的几张图,并且页面只有一个轮播图,在实际应用中,可能会遇到类似ins这种,加载列表,并且都是多图模式的情况. 需要添加依赖包 flukit: ^1.0.0 引用 import 'package:flukit/flukit.da