`

Endless scroller jQuery plugin 到面面底部后在加载信息的插件

    博客分类:
  • ajax
阅读更多

http://pushingtheweb.com/2010/09/endless-scroller-jquery-plugin/

 

In a recent web project, I needed to build an automatic pagination for end-users, which automatically fetches more content when the user scrolls the page. Examples of this are the Facebook log and the shoe browsing on http://www.mirapodo.de/herrenschuhe/ (not affiliated with us). When the user gets to the end of the page, it fetches more content. This way, you don’t have to load more than neccesary on the first page load, and the user benefits, since she doesn’t have to click numbers in a pagination widget. The result is the jquery.esn.autobrowse.js jQuery plugin which does that for any page.

It loads JSON data from the server, and renders it client-side. One of the problems with a typical auto-pagination is that when the user clicks on a link in the content, and then clicks “back” in the browser, he or she ends up at the top of the page and have to scroll all the way down again (even Facebook suffers from this problem at the time of writing this 2010). In this plugin, you can choose to use the browser local storage to cache the content fetched, and it keeps track on how far you have scrolled on the page. This means that if the user clicks a link and then goes back, she will see what she left.

The browser cache is accomplished using the jStorage plugin (slightly modified for this autobrowse plugin). It presents a cross-browser interface for saving arbitrary data in the browser storage. The storage methods are different in different browsers however, so for instance IE doesn’t have as much storage space as Chrome or Firefox. The cache does fallback on an ajax request if the storage failed. The modified version of jStorage notifies the autobrowse plugin when the storage failed (i.e. when the data didn’t fit into the space available).

Try the demo and download . Report bugs or feature requests to me on GitHub or simply fork it!
分享到:
评论

相关推荐

    jquery-endless-scroll-master 滚动加载插件

    jQuery Endless Scroll 插件通过监听用户的滚动事件,当页面内容接近底部时,自动触发请求加载新的数据,将新的内容无缝地添加到现有页面中。这种方式提高了用户浏览长列表或流式内容的效率,特别适用于社交媒体、...

    jquery + endless-scroll 模拟实现 滚动加载数据

    在网页设计和开发中,"Endless Scroll"或"无限滚动"是一种常见功能,它允许用户在滚动页面时自动加载更多内容,而无需点击“加载更多”按钮。这种技术极大地提升了用户体验,尤其在处理大量数据如新闻、社交媒体或...

    jquery endlessEndless Scroll.rar jquery endlessEndless Scroll.rar

    总结,jQuery Endless Scroll通过监听滚动事件,智能地在用户接近页面底部时加载更多内容,为用户提供流畅的浏览体验。通过理解其工作原理和使用方法,我们可以有效地将这一技术应用于实际项目,提升用户体验。而...

    编程开发-综合控件-Jquery Endless Scroll(无限滚动插件).zip

    **Jquery Endless Scroll**,也称为无限滚动或自动加载,是一种常见的网页设计技术,用于在用户滚动页面到底部时自动加载更多内容。这个技术在数据量庞大的网站中尤其常见,如社交媒体、新闻网站和电商平台,它可以...

    滑到底部自动加载的ListView

    滑到底部自动加载功能(又称Infinite Scroll或Endless Scroll)是许多社交应用、新闻客户端等常见的特性,它允许用户在滚动到底部时自动加载更多的数据,无需手动点击加载按钮。这个特性提高了用户体验,使得用户...

    jQuery滚动Endless.js.zip

    Endless.js 是简单的 jQuery 插件,允许在任意可滚动的 HTML 元素上假如一个直观的滚动。 Endless.js 支持从上到下,从左到右。所以当你在最底部或者开始的位置,你再滚动一次,就会重新遍历一遍。 在线演示 ...

    jQuery滚动插件EndlessScroll.zip

    Endless Scroll 是 jQuery 一个用来实现无限滚动的插件,相信你试过微软新搜索引擎 Bing 的搜索结果,当鼠标向下滚动时,新的内容会一直出现在下方,而不是翻页去浏览。示例代码:// using default options $...

    unity3d游戏 插件 跑酷 Ultimate Endless Runner Kit v1.03资源包.zip

    unity3d游戏 插件 跑酷 Ultimate Endless Runner Kit v1.03资源包.zip

    jq22.com-endless-scroll

    分页加载是在用户滚动到特定距离后一次性加载一定数量的数据;预加载则是在当前可见内容之外提前加载部分数据,减少延迟感;惰性加载则是在内容即将进入视口时才开始加载,节省带宽。 总的来说,"jq22....

    Android应用源码之douBanList(滚动到底部加载新的,软缓存,懒加载).zip

    在Android应用开发中,"douBanList"项目是一个典型的网络数据加载与缓存机制的实现,主要用于在用户滚动到列表底部时动态加载更多数据,同时采用软缓存策略和懒加载技术,优化用户体验。这个项目的源码可以作为...

    CWAC-ENDLESS

    在Android应用开发中,当用户滚动到列表的底部时,通常会触发加载更多数据的操作,这就是所谓的“无限滚动”或“滚动加载”。 **标题解析:** "CWAC-ENDLESS"是项目的简称,其中"CWAC"代表"CommonsWare Android ...

    Python库 | django-endless-pagination-vue-1.2.tar.gz

    在`django-endless-pagination-vue` 中,Vue.js用于前端的数据绑定和视图更新,实现了动态加载更多数据的效果,即用户滚动到页面底部时自动加载下一页内容,无需点击分页按钮,增强了用户浏览的流畅性。 三、无限...

    插件 跑酷 Ultimate Endless Runner Kit v1.03资源包

    开发者可以从资源包中学到如何合理利用Unity的资源管理,如对象池技术,以及如何优化场景加载和渲染效率,确保游戏在不同设备上都能流畅运行。 综上所述,"Ultimate Endless Runner Kit v1.03资源包"提供了丰富的...

    Endless Page Scroller-crx插件

    语言:English 此扩展程序使您可以启动和停止无休止地向下滚动网站页面。 此扩展程序使您可以启动和停止无休止地向下滚动网站页面。 只需单击扩展图标和“开始”按钮即可开始滚动,单击“停止”按钮即可完成滚动。

    android listView 分页加载

    - Endless Scroll监听器:可以自定义一个OnScrollListener,当ListView滚动到底部时触发加载新数据的逻辑。通常,我们会在滚动状态改变时检查是否已到达底部(即滚动条距离底部的距离小于特定阈值)。 - Pager ...

    Android里ListView分页加载数据

    1. Endless Scrolling:为了提供无缝的用户体验,可以在距离底部一定距离时就开始预加载下一页数据,而不是等到用户滚动到底部。 2. Load More Button:除了自动加载,还可以提供一个“加载更多”按钮,让用户手动...

    2_47_插件 跑酷 Ultimate Endless Runner Kit v1.03资源包.zip

    Unity插件源码,资源完整,真实可用,Unity插件源码,资源完整,真实可用,Unity插件源码,资源完整,真实可用,Unity插件源码,资源完整,真实可用,Unity插件源码,资源完整,真实可用,Unity插件源码,资源完整,...

    上拉加载下拉刷新带效果

    上拉加载是指当用户滚动到页面底部时,新的内容自动加载到当前视窗下方,让用户可以无限制地浏览更多内容,而无需点击单独的“加载更多”按钮。这种设计简化了用户操作,尤其在处理无限或大量数据流时十分有效。 二...

    滑动分页加载数据

    这种技术主要用于提高用户体验,因为它允许用户浏览大量信息时无需等待整个数据集一次性加载完成,而是仅在用户滚动到页面底部或边缘时动态加载更多内容。这种加载方式被称为“无限滚动”或“懒加载”。 在Android...

    上滑加载更多,下滑更新

    在移动应用和网页开发中,"上滑加载更多,下滑更新"是一种常见的用户体验设计模式,旨在提高用户在浏览大量数据时的效率和便利性。这种功能通常被应用于新闻聚合、社交媒体、电商产品列表等场景,使得用户无需翻页...

Global site tag (gtag.js) - Google Analytics