JavaScript library for lazy loading images, embedded videos and social media widgets
Currently supports images and iframes.
Usage
- Change the
src
attribute of your images and iframes todata-src
- Add the plugin script file (and jQuery) to your page
- Set the
data-blank-image
attribute of the plugin script tag to the path of a 1x1 transparent GIF - Initialize the elements you want to be lazy loaded like
$('[data-src]').lazy();
You can optionally include the CSS to style unloaded elements or customize the styling yourself.
Each element needs a width
and height
attribute to work properly.
<html>
<body>
<p><img data-src="/img/flower.jpg" width="640" height="400" alt="Flower"></p>
<p><img data-src="/img/flower2.jpg" width="903" height="1024" alt="Flowers"></p>
<p><iframe allowfullscreen frameborder="0" width="560" height="350" id="yt-pBK2rfZt32g" data-src="//www.youtube.com/embed/pBK2rfZt32g/?enablejsapi=1&playerapiid=pBK2rfZt32g&wmode=transparent&autohide=0&autoplay=0&fs=1&hd=1&rel=0&showinfo=0&start=&theme=light&cc_load_policy=0"></iframe></p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/js/lazyloader.js" data-blank-image="/img/blank.gif"></script>
<script charset="utf-8">
(function($) {
"use strict";
$(function() {
$('[data-src]').lazy();
});
})(jQuery);
</script>
</body>
</html>