jQuery plugin that lazy loads images as the user scrolls down the page.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
placeholder.gif
slacker.js

README.md

slacker

Copyright (C) 2010-2012 Aaron Draczynski

http://github.com/aarondraczynski/slacker

http://twitter.com/developer

Released under the MIT License

http://www.opensource.org/licenses/mit-license.php

Introduction

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.

Usage

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>
  

Customization

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.