<h1>Slacker.js</h1>

<section>
  <p>
    Slacker is a standalone JavaScript tool to lazy load images on a page. Slacker uses data- attributes which store the images actual source and then replace a dummy src in the image when it becomes visible in the viewport.
  </p>
  <p>The images in the following list are only displayed when they appear in the viewport. While out of the viewport, the images source (The <code>src</code> attribute) point to a dummy transparent pixel.
  </p>
  <ul>
    <li>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/pixel.gif" data-img-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/img1.jpg" alt="Image 1" id="img1" width="400" height="300" />
    </li>
    <li>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/pixel.gif" data-img-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/img2.jpg" alt="Image 2" id="img2" width="400" height="300" />
    </li>
    <li>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/pixel.gif" data-img-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/img3.jpg" alt="Image 3" id="img3" width="400" height="300" />
    </li>
    <li>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/pixel.gif" data-img-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/img4.jpg" alt="Image 4" id="img4" width="400" height="300" />
    </li>
    <li>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/pixel.gif" data-img-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/img5.jpg" alt="Image 5" id="img5" width="400" height="300" />
    </li>
    <li>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/pixel.gif" data-img-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/img6.jpg" alt="Image 6" id="img6" width="400" height="300" />
    </li>
    <li>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/pixel.gif" data-img-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/img7.jpg" alt="Image 7" id="img7" width="400" height="300" />
    </li>
    <li>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/pixel.gif" data-img-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/img8.jpg" alt="Image 8" id="img8" width="400" height="300" />
    </li>
  </ul>
</section>

<aside class="code">
  <h2>How to use</h2>
  <p>
    The first step is to include the script in your HTML file. Since no additional libraries are needed, there is no other requirement
  </p>
  <pre>
&lt;script src="scripts/slacker.min.js"&gt;&lt;/script&gt;
    </pre>

  <p>
    Then, add some images to your mage. As the <code>src</code> attribute, add <a href="http://mellados.com/projects/slacker/i/pixel.gif" target="_blank">this transparent pixel</a>, and add your image's path/url in the <code>data-img-src</code> attribute
    of your image
  </p>

  <pre>
&lt;img src="images/pixel.gif" data-img-src="images/myImagePath.jpg" width="200" height="100" /&gt;
    </pre>

  <p>
    After that, you just need to initialize the loader in your page
  </p>
  <pre>
&lt;script&gt;
  Slacker.init();
&lt;script&gt;
    </pre>

  <p>
    Another option would be to create one or more instances
  </p>
  <pre>
&lt;script&gt;
  var s = new Slacker();
&lt;script&gt;
    </pre>

  <h2 class="header">Options</h2>

  <p>
    The following configuration options are available

    <ul>
      <li><span>dataAttribute</span> - Data attribue used as placeholder for the image src. Defaulted to <code>data-img-src</code>.</li>
      <li><span>imageSelector</span> - CSS selector specifying the images to be loaded.</li>
      <li><span>offset</span> - The viewport offset for images to be loads. Defaulted to 100.</li>
      <li><span>preCallback</span> - Callback to be executed before each image is loaded.</li>
      <li><span>postCalback</span> - Callback to be executed after each image is loaded.
      </li>
    </ul>
  </p>

  <h3>Example</h3>
  <pre>
&lt;body&gt;
  &lt;img src="images/myImagePath.jpg" /&gt;
  &lt;img src="images/pixel.gif" class="foo" data-custom-attr="images/myImagePath2.jpg" width="200" height="100" /&gt;
  &lt;img src="images/pixel.gif" class="foo" data-custom-attr="images/myImagePath3.jpg" width="200" height="100" /&gt;
  &lt;img src="images/pixel.gif" class="foo" data-custom-attr="images/myImagePath4.jpg" width="200" height="100" /&gt;

  &lt;script&gt;
    var s = newSlacker({
      dataAttribute: 'data-custom-attr',
      preCallback: function(img, dataAttr) {
        return basePath + dataAttr;
      },
      postCallback: function(img) {
        img.className += ' loaded'
      }
    });
  &lt;/script&gt;
&lt;/body&gt;
      </pre>

  <p>
    In this example the image path/url will be grabbed from the <code>data-custom-attr</code> attribute. It then adds the class loaded to the image.
  </p>

  <h2 class="header">API</h2>

  <p>
    The <code>renderImage</code> function has been made public for custom uses. It takes an image as a parameter as follows: <code>Slacker.renderImage(myImage);</code> where <code>myImage</code> is a DOM object representing an image.
  </p>

  <p>
    The <code>renderAllImages</code> function has also been made public. With it you can load all the unloaded images. You can use it like this:
  </p>
  <pre>
var s = new Slacker();
s.renderAllImages();
      </pre>

  <p>
    The <code>destroy</code> function disables the event listeners to check for images to be loaded on scroll and resize:
  </p>
  <pre>
var s = new Slacker({imageSelector: '.infinite-scroll img'});
var t = new Slacker({imageSelector: '.right-rail img'})
t.destroy();        
      </pre>
</aside>

<a href="https://github.com/mmellado/slacker-js"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
body {
  font-family: Helvetica, Arial;
  padding: 20px;
  font-size: 14px;
  line-height: 16px;
}

section {
  width: 50%;
  float: left;
}

aside {
  width: 50%;
  box-sizing: border-box;
  padding-left: 30px;
  float: left;
}

pre {
  background: #eee;
  color: #333;
  font-family: courier;
  border-radius: 3px;
  box-shadow: inset 0 0 3px #000000;
  padding: 10px;
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 15px;
  padding-bottom: 0;
  overflow: scroll;
}

code {
  background: #eee;
  color: #333;
  font-size: 12px;
  font-family: courier;
  border-radius: 3px;
  padding-left: 2px;
  padding-right: 2px;
  border: 1px solid #ddd;
}

h1 {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 15px;
}

h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

p {
  margin-bottom: 15px;
}

img {
  margin-bottom: 15px;
}

aside li {
  list-style: initial;
  margin-bottom: 10px;
  margin-left: 15px;
}

aside li span {
  font-weight: bold;
}

h2.header {
  margin-top: 15px;
}
(function(){
  Slacker.init();
})();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/slacker.js