Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

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.

About

jQuery plugin that lazy loads images as the user scrolls down the page.

Resources

Releases

No releases published

Packages

No packages published