Infinite AJAX Scroll

What is Infinite AJAX Scroll?

Infinite AJAX Scroll is a jQuery infinite scrolling plugin. It works by reading the next (and previous) links of your existing server-side pagination and load these pages via AJAX when the visitor scrolls to the end of the page.

This approach, also known as progressive enhancement, is SEO-friendly and offers your users a better user-experience, resulting in longer visitor times and more page views.

Features:

 

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: infiniteajaxscroll.com

1. INCLUDE JS FILES

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="/vendor/jquery-ias/dist/jquery-ias.min.js"></script>

2. HTML

<div id="posts">
    <div class="post">...</div>
    <div class="post">...</div>
</div>

<div id="pagination">
    <a href="/page2/" class="next">next</a>
</div>

The required elements are:

• A container (#posts in this example) wrapped around your page items
• Item elements (#posts > .post in this example)
• A pagination element (#pagination in this example) containing your pagination links
• A link inside your pagination with a class that indicates it's the next link (#pagination > .next in this example)

3. JAVASCRIPT

var ias = jQuery.ias({
  container:  '#posts',
  item:       '.post',
  pagination: '#pagination',
  next:       '.next'
});

Now you have a basic setup of Infinite AJAX Scroll. Time to add some fancy stuff.

// Adds a link which has to be clicked to load the next page
ias.extension(new IASTriggerExtension());

// Adds a loader image which is displayed during loading
ias.extension(new IASSpinnerExtension());

// Adds a text when there are no more pages left to load
ias.extension(new IASNoneLeftExtension());

4. OPTIONS

container: Enter the selector of the element containing your items that you want to paginate.

Type: string

Default: "#container"

item: Enter the selector of the element that each item has. Make sure the elements are inside the container element.

Type: string

Default: ".item"

pagination: Enter the selector of the element that contains your regular pagination links, like next, previous and the page numbers. This element will be hidden when Infinite AJAX Scroll loads.

Type: string

Default: "#pagination"

next: Enter the selector of the link element that links to the next page. The href attribute of this element will be used to get the items from the next page. Make sure there is only one(1) element that matches the selector.

Type: string

Default: ".next"

delay: Minimal number of milliseconds to stay in a loading state.

Type: integer

Default: 600

In: milliseconds

negativeMargin: On default IAS starts loading new items when you scroll to the latest .item element. The negativeMargin will be added to the items' offset, giving you the ability to load new items earlier (please note that the margin is always transformed to a negative integer).

Type: integer

Default: 10

For example:

Setting a negativeMargin of 250 means that IAS will start loading 250 pixel before the last item has scrolled into view.

5. METHODS

extension: Adds a extension to Infinite AJAX Scroll.

jQuery.ias().extension(new anExtension());

next: Loads the next page.

jQuery.ias().next();

on: Adds an event listener.

jQuery.ias().on('eventName', callback);

See Events for available events.

one: Adds an event listener that is only triggered once.

jQuery.ias().one('eventName', callback);

See Events for available events.

off: Removes an event listener.

jQuery.ias().off('eventName', callback);

unbind: Unbinds IAS from any window or document events.

jQuery.ias().unbind();

bind: Binds IAS from to window or document events.

jQuery.ias().bind();

destroy: Alias of unbind method.

6. EVENTS

scroll

argument	type	description
scrollOffset	integer	current number of pixels scrolled from the top
scrollThreshold	integer	threshold which marks the line from where IAS should start loading the next page

Triggered when the visitors scrolls.

load

argument	type	description
url	string	url that will be loaded

Triggered when a new url will be loaded from the server.

loaded

argument	type	description
data	string	html of the loaded page
items	array	items

Triggered after a new page was loaded from the server.

render

argument	type	description
items	array	items to be rendered

Triggered before new items will be rendered.

rendered

argument	type	description
items	array	items to be rendered

Triggered after new items have rendered.

Note: This event is only fired once.

noneLeft

Triggered when there are no more pages left.

next

argument	type	description
url	string	the url of the next page that will be loaded

Triggered when the next page should be loaded. Happens before loading of the next page starts.

With this event it is possible to cancel the loading of the next page. You can do this by returning false from your callback.

ready

Triggered when IAS and all the extensions have been initialized.

• Basic
• Overflow
• History
• Masonry