jQuery-lazyload-any

A jQuery plugin provides a lazyload function for images, iframe or anything.

Download

Compress
Uncompress

Demo

Images (Overflow and Tabs)
Youtube

Browser Support

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

Usage

HTML

<div id="you-want-lazyload">
  <!--
    Anything you want to lazyload
  -->
</div>

JavaScript

$('#you-want-lazyload').lazyload(options);

Options

threshold: Number (default: 0)

Sets the pixels to load earlier. Setting threshold to 200 causes image to load 200 pixels before it appears on viewport. It should be greater or equal zero.

load: Function(element) (default: undefined)

Sets the callback function when the load event is firing.

element: The content in lazyload tag will be returned as a jQuery object.

trigger: String (default: "appear")

Sets events to trigger lazyload. Default is customized event appear, it will trigger when element appear in screen. You could set other events including each one separated by a space, ex: mousedown touchstart.

Methods

$.lazyload.check()

Force to trigger detection event.

$.lazyload.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 $.lazyload.check() to trigger detection manually.

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 $.lazyload.check() to force detection.

Example

HTML

<div class="lazyload">
  <!--
    <img src="image.png" />
  -->
</div>

JavaScript

$('.lazyload').lazyload({
  // Sets the pixels to load earlier. Setting threshold to 200 causes image to load 200 pixels
  // before it appears on viewport. It should be greater or equal zero.
  threshold: 200,

  // Sets the callback function when the load event is firing.
  // element: The content in lazyload tag will be returned as a jQuery object.
  load: function(element) {},

  // Sets events to trigger lazyload. Default is customized event `appear`, it will trigger when
  // element appear in screen. You could set other events including each one separated by a space.
  trigger: "appear"
});

License

The project is released under the MIT license.

Contact

The project's website is located at https://github.com/emn178/jquery-lazyload-any
Author: emn178@gmail.com