jQuery Plugin To Smartly Load Images While Scrolling - loadScroll

loadScroll is a minimal jQuery plugin designed for high performance website that has the ability to delay the loading of your images until you start scrolling down the page as well as the images are scrolled into viewport, so you can save bandwidth and server requests.

How to use it:

1. Load the jQuery loadScroll plugin after jQuery library, but before the closing body tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jQuery.loadScroll.js"></script>

2. Add the images into your webpage using Html5 data-src attribute. You can also insert placeholders using the regular img's src attribute.

<img data-src="1.jpg" src="Placeholder.jpg" alt="Image Alt">
<img data-src="2.jpg" src="Placeholder.jpg" alt="Image Alt">
<img data-src="3.jpg" src="Placeholder.jpg" alt="Image Alt">
...

3. Call the plugin on the img tags and specify the duration of the fadeIn effect as your images are come into view.

$('img').loadScroll(500); // in ms

---

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