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.
View demo: http://mellados.com/labs/slacker
The first step is to include the script in your HTML file. Since no additional libraries are needed, there is no other requirement
<script src="slacker-js/dist/slacker.min.js"></script>;Then, add some images to your page. As the src attribute, add this transparent pixel or any other placeholder image,
and add your image's path/url in the data-img-src attribute of your image
<img src="images/pixel.gif" data-img-src="images/myImagePath.jpg" width="200" height="100" />After that, you just need to initialize the loader in your page
<script>
Slacker.init();
</script>Another option would be to create one or more instances
<script>
var s = new Slacker();
</script>The following configuration options are available for initializing Slacker
Type: String Default data-img-src
The imgPlaceholder option allows you to select the data attribute where the image src will be stored before loading the image.
Type: String Default: The selector is defaulted to all images with the specified dataAttribute
The imageSelector option allows you to set a CSS selector for images to be loaded.
Type : Integer Defaults 100
The viewport offset for images to be loads.
Slacker.init({
offset: 500
})Type: Function
Return: The updated value of the data attribute
This callback will be executed before each image is loaded. This is useful for url formatting before images are loaded.
var s = new Slacker({
preCallback: function(img, dataAttr) {
return basePath + dataAttr;
}
});Type: Function
This callback will be executed after each image is loaded. This is useful if any actions need to be triggered after an image loads, like adding a class.
Slacker.init({
postCallback: function(img) {
img.className += ' loaded';
}
});The renderImage function has been made public for custom uses. It takes an image as a parameter as follows: Slacker.loadImage(myImage); where myImage is a DOM object representing an image.
With this function, you can load images at any given moment even if they are outside the viewport.
The renderAllImages function has also been made public. With it you can load all the unloaded images. You can use it like this:
var s = new Slacker();
s.renderAllImages();The destroy function disables the event listeners to check for images to be loaded on scroll and resize
var s = new Slacker({imageSelector: '.infinite-scroll img'});
var t = new Slacker({imageSelector: '.right-rail img'})
t.destroy();Copyright 2014 LinkedIn Corp. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.