jQuery-appear

A jQuery plugin provides appear and disappear events to do lazyload, infinite scroll or else effect.

Demo

Lazyload (Overflow and Tabs) (You could also refer to jQuery-lazyload-any)
Infinite Scroll

Download

Compress
Uncompress

Installation

You can also install jquery-appear by using Bower.

bower install jquery-appear 

Usage

You could just use jQuery bind, delegate or on to listen event. HTML

<div id="#you-want-to-detect"> </div>

JavaScript

// trigger when first appear or disappear $('#you-want-to-detect').bind('appear', appearHandler); $('#you-want-to-detect').bind('disappear', disappearHandler);  // trigger when scrolling and visible in screen $('#you-want-to-detect').bind('appearing', appearingHandler);

Methods

$.appear.check()

Force to trigger detection event.

$.appear.setInterval(inverval)

Set interval of timer that check container display status.

inverval: Number (default: 50)

Interval of timer. Set 0 to disable timer, and you can use $.appear.check() to trigger detection manually.

$.appear.refresh(selector)

Refresh status of elements bound event. Element will bind scroll event to parent scrollable automatically when binding appear event. If you move element, you should use this method to bind again.

selector: String or Object (default: undefined)

The elements that you want to refresh. It will refresh all elements bound appear event if you don't pass this parameter.

$.appear.setEventPrefix(prefix)

You can set prefix to avoid event conflict.

prefix: String

The prefix that you want to set. It will apply to new event bindings. You should define it at first.

Notice

• You should initialize after the element add to page. Or it can't detect whether it's in screen. If you do that, you still can use $.appear.check() to force detection.
• Detection uses jQuery element.is(':visible'), it will return false if element's width and height are equal to zero. So you have to make sure the appear element with any width or height.

Example

HTML

<div id="loading">   <img src="loading.gif" /> </div>

JavaScript

$('#loading').bind('appear', ajaxLoad);

License

The project is released under the MIT license.

Contact

The project's website is located at https://github.com/emn178/jquery-appear
Author: Yi-Cyuan Chen ([email protected])