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

Compress
Uncompress

Images
Youtube

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

HTML

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

JavaScript

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

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.

Sets the callback function when the load event is firing.

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

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.

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"
});

The project is released under the MIT license.

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