My Content
Lorem ipsum dolor sit amet...
Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gilbitron/infiniscroll
A simple, jQuery, infinite-scroll plugin.
https://github.com/gilbitron/infiniscroll
Last synced: 30 days ago
JSON representation
A simple, jQuery, infinite-scroll plugin.
- Host: GitHub
- URL: https://github.com/gilbitron/infiniscroll
- Owner: gilbitron
- License: mit
- Created: 2014-02-03T14:29:51.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2018-05-04T09:37:31.000Z (over 6 years ago)
- Last Synced: 2024-05-02T00:08:26.762Z (7 months ago)
- Language: JavaScript
- Size: 7.81 KB
- Stars: 16
- Watchers: 3
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.txt
- License: LICENSE
Awesome Lists containing this project
README
### This repo is no longer maintained. If you would like to take over ownership please [get in touch](mailto:[email protected]).
Infiniscroll
============
Infiniscroll is a jQuery plugin for infinite scrolling (also known as lazy loading, endless scrolling, autopager, endless pages etc.)
where new content is loaded via AJAX within the current page or content area as you scroll down. This is the same technique that
Twitter and Facebook use for their news feeds.
Usage
-----
Include the scripts in your HTML head:
```html
```
Set up your HTML something like the following (class names/IDs can be changed and passed into `infiniscroll()`):
```html
Loading...
```
Then simply hook up Infiniscroll:
```html
$(document).ready(function(){
$('.content').infiniscroll();
});
```
Options
-------
Below is a list of all the options that you can pass into Infiniscroll and a description of what they do:
```javascript
navSelector: '.pagination', // Selector for your static naivgation (this will be hidden)
nextSelector: '.pagination a.next', // Selector for the NEXT link (e.g. to page 2)
loadingSelector: '.loading', // Selector for the loading element
pageFragment: '.content', // Selector for the content you want to extract from the response
scrollBuffer: 200, // The scroll amount in px before the bottom of the page that Infiniscroll should start to load the next page
scrollOnLoad: true, // Should the window scroll to the position of the newly loaded content (if the user is at the bottom of the page)
scrollOnLoadDistance: 200, // The distance to scroll down when new content is loaded,
scrollOnLoadSpeed: 500, // The speed to scroll down when new content is loaded
onInit: function(){}, // Callback after plugin has loaded
beforeContentLoaded: function(link){}, // Callback before new content is loaded
afterContentLoaded: function(html){} // Callback after new content has been loaded
```
How?
----
There is a little known feature in the `.load()` method that lets you specify the CSS selector of the html you want to include.
jQuery will load in any local URL, then parse the html and grab only the elements you’ve defined with your selector. For example:
```javascript
// Load all post divs from page 2 into an off-DOM div
$('.content').load('/page/2/ .content',function(){
$(this).appendTo('.content'); // once they're loaded, append them to our content area
});
```
Why?
----
See [http://gilbert.pellegrom.me/jquery-infiniscroll-plugin](http://gilbert.pellegrom.me/jquery-infiniscroll-plugin)
Credits
-------
Infiniscroll was created by [Gilbert Pellegrom](http://gilbert.pellegrom.me) from [Dev7studios](http://dev7studios.com). Released under the MIT license.