/ Lazy Loading

A jQuery plugin for images, videos and other media

A jQuery plugin for images, videos and other media

Lazy Load XT jQuery plugin

Lazy load XT is a jQuery plugin for images, videos and other media.

Mobile-oriented, fast and extensible jQuery plugin for lazy loading of images/videos.

Currently tested in IE 6-11, Chrome 1-47, Firefox 1.5-43.0, Safari 3-9, Opera 10.6-34.0, iOS 5-9, Android 2.3-5.1, Amazon Kindle Fire 2 and HD 8.9, Opera Mini 7.

Requires jQuery 1.7+, Zepto 1.0+, DOMtastic 0.7.3+ built with --jquery-compat, or jQLight.

Usage

First of all it's necessary to load jQuery and Lazy Load XT script. There are two versions of Lazy Load XT:

  1. jquery.lazyloadxt.js, standard version for lazy loading of images only.

  2. jquery.lazyloadxt.extra.js, version with included video addon for lazy loading of both images and videos.

To make media elements (img, video, source, iframe) to be lazy loaded, rename src attribute to data-src.
It is highly recommended to set width and height attributes. Optionally you can add a placeholder src to bypass
HTML validators:

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

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

PS. In src directory you can found jquery.lazyloadxt.simple.js, it is initial LazyLoadXT version of minimal size
with excluded support of on* handlers, lazy* events, blankImage option and addons.

jQLight

LazyLoadXT may be used without jQuery framework by loading small
jqlight.lazyloadxt.min.js script
(1.3KiB gzipped):

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

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

Note: currently jquery.lazyloadxt.bg.js addon is not supported by jQLight.

GitHub