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

Compress
Uncompress

You can also install jquery-appear by using Bower.

bower install jquery-appear

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

jQuery-appear currently supports IE7+, Chrome, Firefox, Safari and Opera.

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

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

JavaScript

$('#you-want-to-detect').bind('appear', appearHandler);
$('#you-want-to-detect').bind('disappear', disappearHandler);

Force to trigger detection event.

Set interval of timer that check container display status.

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

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.

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

• 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.

HTML

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

JavaScript

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

The project is released under the MIT license.

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