Lazy Load XT : jQuery plugin for lazy loading of images, videos and other media

Mobile-oriented, fast and extensible jQuery plugin for lazy loading of images and videos with build-in support of jQueryMobile framework.

Download: https://github.com/ressio/lazy-load-xt

Demonstration: http://ressio.github.io/lazy-load-xt/demo/

Plugin homepage: https://github.com/ressio/lazy-load-xt

Implementation:

1. Include jquery.lazyloadxt.min.js:

<script src="jquery.lazyloadxt.min.js"></script>

2. Replace src attribute in your es to data-src. Optionally add a placeholder src and a fallback image (in the latter case it’s necessary to mark first image with class=”lazy”, see item 3 below):

<img class="lazy" data-src="lazy.jpg" width="100" height="100">
<noscript><img src="lazy.jpg" width="100" height="100"></noscript>

It’s recommended to keep the order of attributes in both  tags, such a code will be effectively gzipped.

3. If you use fallback image, hide first image using CSS (otherwise browsers with disabled javascript will display both images):

img.lazy {
  display: none;
}

Lazy Load XT plugin removes this class (classNojs option) at image initialization.

Options:

Screenshots: