无穷滚动(Infinite scroll)的实现原理
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)的实现原理的更多相关文章
- Infinite Scroll - jQuery & WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
- Infinite Scroll–无限分页
一.前言 现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个“点击加载 ...
- [转]用 jQuery 实现页面滚动(Scroll)效果的完美方法
转自: http://zww.me/archives/25144 很多博主都写过/转载过用 jQuery 实现页面滚动(Scroll)效果的方法,但目前搜来的方法大都在 Opera 下有个小 Bug: ...
- infinite scroll blogs
infinite scroll blogs 无限滚动 blogs beacon api https://www.sitepoint.com/introduction-beacon-api/ Histo ...
- JavaScript Infinite scroll & Masonry
// infinitescroll() is called on the element that surrounds // the items you will be loading more of ...
- Infinite scroll has been called autopagerize, unpaginate, endless pages
http://www.infinite-scroll.com/ Infinite scroll has been called autopagerize, unpaginate, endless pa ...
- 网页浏览 infinite scroll效果知识
infinite scroll 类似一些网站, 例如京东搜索商品, 浏览到最后一页,自动加载新的商品. 一则可以加快首页响应速度, 二则减轻带宽和服务器荷载. 这么多商品信息一次性返回给客户端也是不可 ...
- 滚动锁定 scroll lock 键有什么用?
滚动锁定 scroll lock 键有什么用? 中文名称:滚动锁定键 按下此键后在Excel等按上.下键滚动时,会锁定光标而滚动页面:如果放开此键,则按上.下键时会滚动光标而不滚动页面. ...
- mint ui解决Navbar和Infinite scroll共存时的bug
Navbar和Infinite scroll共同使用时会出现无限加载的问题,滑动也会出现乱加载. 只需要判断一下就可以了,代码: html: <mt-navbar v-model="s ...
随机推荐
- Scalaz(30)- Free :Natural Tranformation ~> - map higher kinded types for free
当我们需要定义一些对应高阶类型进行相互类型转换的操作函数时,我们发现scala语言并不提供能定义这种函数的支持.举例来说:如果我们希望定义一个函数把对于任何T值的Option[T]转换成List[T] ...
- Android开发跳槽、简历和面试的那些事
年后不久,就迎来了一年一度的招聘旺季,尤其,对于互联网行业来说,近些年的3月份被视为换工作的最高峰,已经没什么可以争议的了. 至今为止,在小组Android开发招聘这块,已经面试有近30人了.最后得出 ...
- 参数化命令相关知识点之==================防止SQl的注入
一: 使用参数化命令查询DAL类: public DataTable StudentDAL(string name,string gender) { string str="连接字符串&qu ...
- java内存模型-volatile
volatile 的特性 当我们声明共享变量为 volatile 后,对这个变量的读/写将会很特别.理解 volatile 特性的一个好方法是:把对 volatile 变量的单个读/写,看成是使用同一 ...
- 简单可用好实现的 HA 高可用设计
本文为作者原创,如需转载请注明出处. 1. 实现的功能 一主多备,自动选主 启动记录可查询 2. 前置需求 一台数据库用以记录,如 MySQL.Redis.MongoDB 等.关键是设计中的思想,用啥 ...
- css知多少(9)——float下篇
float内容比较多,咱们分上.下两篇来介绍,上篇已经写完,这是下篇.建议大家先把上篇看了,再来看下文,精彩内容不要掠过啊. 1. 清除float <上篇>中我们提到,float具有“破坏 ...
- 20款美化网站的 jQuery Lightbox 灯箱插件
jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会 ...
- Awesomplete - 零依赖的简单自动完成插件
Awesomplete 是一款超轻量级的,可定制的,简单的自动完成插件,零依赖,使用现代化标准构建.你可以简单地添加 awesomplete 样式,让它自动处理(你仍然可以通过指定 HTML 属性配置 ...
- Unsplash.it - 实用的图片占位符,支持个性化设置
Unsplash.it 是一个使用漂亮的图像作为占位符的工具.只要把你的图像尺寸(宽与高)放到网址后面的参数中,你会得到一个占位符.你可以很容易地得到一个随机图像或者是一个模糊图像.也支持获取灰度图像 ...
- js、jquery获取当前url中各个参数
首先,先把获取各参数的方式再写一遍,相信大家都耳熟能详,就写几个常用的吧. 以此网址https://i.cnblogs.com/EditPosts.aspx?opt=1为例: 1. var url=w ...