Copyright (C) 2010-2012 Aaron Draczynski
http://github.com/aarondraczynski/slacker
Released under the MIT License
http://www.opensource.org/licenses/mit-license.php
Slacker is a jQuery plugin that lazy loads images as the user scrolls down the page.
Images that are located outside of the current viewport position will not be loaded until the user scrolls to them, conserving bandwidth and decreasing page load time.
Slacker requires jQuery v1.7 or later.
Include slacker.js on your page after jQuery:
<script src="jquery.js" type="text/javascript"></script>
<script src="slacker.js" type="text/javascript"></script>
Your image HTML should be formatted as shown below, with a noscript alternative for users without JavaScript. A 1px placeholder graphic is set as the initial image src, which is replaced with the src of the actual image once Slacker detects the user has scrolled that far.
<img class="l" src="placeholder.gif" data-src="actual-image.jpg" width="640" height="480" alt="Image" />
<noscript>
<img src="actual-image.jpg" width="640" height="480" alt="Image" />
</noscript>
In your site JavaScript, initialize Slacker on all images you're lazy loading (any <img> with class "l") by making the following call:
$('.l').slacker();
Finally, ensure that users without JavaScript will not see any of the placeholder graphics by including the following style in your page:
<noscript>
<style type="text/css">
.l { display: none }
</style>
</noscript>
You can modify the sensitivity variable inside of slacker.js. This is a threshold (in pixels) where images located slightly outside of the current scroll position will be loaded anyways. This ensures that as the user continues scrolling, the next image will be loaded even if it's slightly out of view.