1 无穷滚动(无限加载)与分页的比较

现在越来越多的网站或者博客的列表页开始抛弃传统的分页技术,大致的原因在于,分页明显地增加了用户的操作行为以及页面加载等待的时间,而网页浏览者往往没什么耐心。

而无穷滚动提供给了读者一种沉浸式的阅读体验。新版的Yahoo.com亦开始拥抱这一技术。

2 无穷滚动的实现原理

(1) 设置存在内容的一个容器“container”,这个容器就放着内容列表;

(2) 设置计时器或者$(window).scroll()事件,计算容器“container”的高度$(window).height()和$(window).scrollTop()之和 的大小关系;

(3) 当前者小于后者时,通过ajax,将新内容append到容器“container”。

3 核心代码演示

$(document).ready(function () {
var container = $('容器'); // 获取容器
var i = ; // 分页值,用于select记录时给limit赋值
$(window).scroll(function () {
var containerHeight = container.height() + 121; // 容器高度 + 容器top至文档top的距离
         var distance = $(window).height() + $(window).scrollTop(); // 视口高度 + 滚动距离
if (containerHeight <= distance) {
$.ajax({
type: 'post',
url: "控制器/方法",
data: {i: i},
success: function (data) {
i++; // 分页值+1
$.each(data, function (i, n) {
   // 数据处理代码
container.append('新内容'); // append新内容
});
}
});
}
});
});

4 生产环境代码推荐

当然,上述代码只是阐述了无穷滚动的实现原理,生产环境推荐infinite-scroll

无穷滚动(Infinite scroll)的实现原理的更多相关文章

  1. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

  2. Infinite Scroll–无限分页

    一.前言 现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个“点击加载 ...

  3. [转]用 jQuery 实现页面滚动(Scroll)效果的完美方法

    转自: http://zww.me/archives/25144 很多博主都写过/转载过用 jQuery 实现页面滚动(Scroll)效果的方法,但目前搜来的方法大都在 Opera 下有个小 Bug: ...

  4. infinite scroll blogs

    infinite scroll blogs 无限滚动 blogs beacon api https://www.sitepoint.com/introduction-beacon-api/ Histo ...

  5. JavaScript Infinite scroll & Masonry

    // infinitescroll() is called on the element that surrounds // the items you will be loading more of ...

  6. Infinite scroll has been called autopagerize, unpaginate, endless pages

    http://www.infinite-scroll.com/ Infinite scroll has been called autopagerize, unpaginate, endless pa ...

  7. 网页浏览 infinite scroll效果知识

    infinite scroll 类似一些网站, 例如京东搜索商品, 浏览到最后一页,自动加载新的商品. 一则可以加快首页响应速度, 二则减轻带宽和服务器荷载. 这么多商品信息一次性返回给客户端也是不可 ...

  8. 滚动锁定 scroll lock 键有什么用?

    滚动锁定 scroll lock 键有什么用? 中文名称:滚动锁定键  按下此键后在Excel等按上.下键滚动时,会锁定光标而滚动页面:如果放开此键,则按上.下键时会滚动光标而不滚动页面.      ...

  9. mint ui解决Navbar和Infinite scroll共存时的bug

    Navbar和Infinite scroll共同使用时会出现无限加载的问题,滑动也会出现乱加载. 只需要判断一下就可以了,代码: html: <mt-navbar v-model="s ...

随机推荐

  1. Scalaz(30)- Free :Natural Tranformation ~> - map higher kinded types for free

    当我们需要定义一些对应高阶类型进行相互类型转换的操作函数时,我们发现scala语言并不提供能定义这种函数的支持.举例来说:如果我们希望定义一个函数把对于任何T值的Option[T]转换成List[T] ...

  2. Android开发跳槽、简历和面试的那些事

    年后不久,就迎来了一年一度的招聘旺季,尤其,对于互联网行业来说,近些年的3月份被视为换工作的最高峰,已经没什么可以争议的了. 至今为止,在小组Android开发招聘这块,已经面试有近30人了.最后得出 ...

  3. 参数化命令相关知识点之==================防止SQl的注入

    一: 使用参数化命令查询DAL类: public DataTable StudentDAL(string name,string gender) { string str="连接字符串&qu ...

  4. java内存模型-volatile

    volatile 的特性 当我们声明共享变量为 volatile 后,对这个变量的读/写将会很特别.理解 volatile 特性的一个好方法是:把对 volatile 变量的单个读/写,看成是使用同一 ...

  5. 简单可用好实现的 HA 高可用设计

    本文为作者原创,如需转载请注明出处. 1. 实现的功能 一主多备,自动选主 启动记录可查询 2. 前置需求 一台数据库用以记录,如 MySQL.Redis.MongoDB 等.关键是设计中的思想,用啥 ...

  6. css知多少(9)——float下篇

    float内容比较多,咱们分上.下两篇来介绍,上篇已经写完,这是下篇.建议大家先把上篇看了,再来看下文,精彩内容不要掠过啊. 1. 清除float <上篇>中我们提到,float具有“破坏 ...

  7. 20款美化网站的 jQuery Lightbox 灯箱插件

    jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会 ...

  8. Awesomplete - 零依赖的简单自动完成插件

    Awesomplete 是一款超轻量级的,可定制的,简单的自动完成插件,零依赖,使用现代化标准构建.你可以简单地添加 awesomplete 样式,让它自动处理(你仍然可以通过指定 HTML 属性配置 ...

  9. Unsplash.it - 实用的图片占位符,支持个性化设置

    Unsplash.it 是一个使用漂亮的图像作为占位符的工具.只要把你的图像尺寸(宽与高)放到网址后面的参数中,你会得到一个占位符.你可以很容易地得到一个随机图像或者是一个模糊图像.也支持获取灰度图像 ...

  10. js、jquery获取当前url中各个参数

    首先,先把获取各参数的方式再写一遍,相信大家都耳熟能详,就写几个常用的吧. 以此网址https://i.cnblogs.com/EditPosts.aspx?opt=1为例: 1. var url=w ...