Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mmellado/slacker-js
Standalone JavaScript tool to lazy load images on a page
https://github.com/mmellado/slacker-js
Last synced: 15 days ago
JSON representation
Standalone JavaScript tool to lazy load images on a page
- Host: GitHub
- URL: https://github.com/mmellado/slacker-js
- Owner: mmellado
- License: other
- Created: 2015-07-16T18:45:29.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-02-03T14:13:10.000Z (about 5 years ago)
- Last Synced: 2024-11-21T01:13:28.438Z (3 months ago)
- Language: JavaScript
- Size: 10.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Slacker JS
===============
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](http://mellados.com/labs/slacker)
## How to use
The first step is to include the script in your HTML file. Since no additional libraries are needed, there is no other requirement
```HTML
;
```
Then, add some images to your page. As the `src` attribute, add [this transparent pixel](http://mellados.com/labs/slacker/i/pixel.gif) or any other placeholder image,
and add your image's path/url in the `data-img-src` attribute of your image
```HTML
```
After that, you just need to initialize the loader in your page
```HTML
Slacker.init();
```
Another option would be to create one or more instances
```HTML
var s = new Slacker();
```
## Options
The following configuration options are available for initializing Slacker
### dataAttribute
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.
### imageSelector
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.
### offset
Type : `Integer` Defaults `100`
The viewport offset for images to be loads.
```javaScript
Slacker.init({
offset: 500
})
```
### preCallback
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.
```javaScript
var s = new Slacker({
preCallback: function(img, dataAttr) {
return basePath + dataAttr;
}
});
```
### postCallback
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.
```javaScript
Slacker.init({
postCallback: function(img) {
img.className += ' loaded';
}
});
```
## renderImage(image)
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.
## renderAllImages()
The `renderAllImages` function has also been made public. With it you can load all the unloaded images. You can use it like this:
```javaScript
var s = new Slacker();
s.renderAllImages();
```
## destroy
The `destroy` function disables the event listeners to check for images to be loaded on scroll and resize
```javaScript
var s = new Slacker({imageSelector: '.infinite-scroll img'});
var t = new Slacker({imageSelector: '.right-rail img'})
t.destroy();
```
## License
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.