`

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!
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics