jQuery Plugin For Lazy Loading Images - lately.js

jQuery Plugin For Lazy Loading Images - lately.js
File Size: 9.4KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.