A repository of over 1000 quality jQuery plugins

jQuery JQuery LoadScroll

JQuery LoadScroll is a jQuery Loading plugin.

Created by Nathco

Extension for loading images while scrolling

Not what you're looking for? Click here to view more Loading jQuery plugins

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 code@nath.co or find me on GitHub @nathco.



You might also like these other Loading jQuery Plugins

  • PreLoadMe, a lightweig...

    PreLoadMe is a lightweight preloader for any webcontent. Powered by jQuery and CSS it is fully responsive and will run […]

  • Material Preloader

    A jQuery plugin that recreates the Material Design pre-loader (as seen on inbox).

  • jQuery Google Analytics

    A Google Analytics plugin for jQuery. Improves page load times. Simplifies link and event tracking.