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:
