jQuery Plugin For Lazy Loading Images - lately.js

lately.js is considered as one of the most lightweight  jQuery Lazy Loading plugins that delay loading large images in long webpages to reduce the page loading time. 

How to use it:

1. Include jQuery library and lately.js:

<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script> 
<script src='jquery.lately.js'></script> 

2. Include your images, replace the src-attribute with an image-placeholder and use the Data-src-attribute for your real image.

<img src="holder.png" data-src="img.jpg">

3. The CSS

img[data-src] {
display: block;
}

4. If you need a fallback for those who have javascript disabled, just add a noscript-tag after your image:

<noscript> <img src="img.png"> </noscript>

img[data-src] {
display: none;
}

5. Call the plugin

<script>
      $("img[data-src]").show().lately();
</script>

6. Options

container: window,  // The scrolling container
gapX: 0, // The horizontal threshold
gapY: 0 // The vertical threshold

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.