🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

loadScroll is a minimal jQuery plugin to delay the loading of your images until you start scrolling down the page as well as the images are scrolled into viewport.

lazy-load

Documentation

jQuery.loadScroll

Simple jQuery extension for dynamically loading images while scrolling. Intended for image-heavy websites to save bandwidth and decrease intial load time.

Installation

Include the latest version of jQuery and jQuery.loadScroll.js in the <head> of your HTML document:

<script src="jQuery.min.js"></script>   <script src="jQuery.loadScroll.js"></script>

How to Use

Reference the loadScroll() method and use the data-src attribute for all dynamic loading images. The data-src changes to the standard src attribute as the image(s) enter the viewport. Placeholder images are optional. See the live demo: code.nath.co/loadScroll

HTML

<!-- Load on Scroll --> <img data-src="a.png" src="#" alt=""> <img data-src="b.png" src="#" alt=""> <img data-src="c.png" src="#" alt=""> <img data-src="d.png" src="placeholder.png" alt="">  

jQuery

$(function() {        // Default     $('img').loadScroll();          // Custom fadeIn Duration     $('img').loadScroll(500);      });

Browser Support

– Google Chrome
– Safari ( Desktop & Mobile )
– Internet Explorer ( 8, 9, 10+ )
– Firefox
– Opera ( Not Tested )

Release Notes

jQuery.loadScroll 1.0
– Initial Release
jQuery.loadScroll 1.0.1
– Changed isrc attribute to data-src for HTML validation
– Added paramater for fadeIn duration

Feedback

If you discover any issues or have questions regarding usage, please send a message to [email protected] or find me on GitHub @nathco.


You May Also Like