Extension for loading images while scrolling
Switch branches/tags
Nothing to show
Clone or download
Latest commit 39946b2 Apr 10, 2015
Failed to load latest commit information.
README.md Updated Documentation Apr 10, 2015
jQuery.loadScroll.js Updated Documentation Apr 10, 2015



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


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


<!-- 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="">  


$(function() {  

    // Default
    // Custom fadeIn Duration

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


If you discover any issues or have questions regarding usage, please send a message to code@nath.co or find me on GitHub @nathco.