|File Size:||3.16 KB|
|Official Website:||Go to website|
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 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