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.
Type Name Latest commit message Commit time
Failed to load latest commit information.



Copyright (C) 2010-2012 Aaron Draczynski



Released under the MIT License



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" />
      <img src="actual-image.jpg" width="640" height="480" alt="Image" />

In your site JavaScript, initialize Slacker on all images you're lazy loading (any <img> with class "l") by making the following call:


Finally, ensure that users without JavaScript will not see any of the placeholder graphics by including the following style in your page:

      <style type="text/css">
        .l { display: none }


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.