Example Usage
Non-responsive
The most basic method simply sets the src attribute as the element enters the viewport.
// html
<img class="dvz-lazy" src="img/transparent.gif" data-src="http://dummyimage.com/1400x700/753e75/fff.png">
// js
slothyLoader({selector: ".dvz-lazy"})
Non-responsive w/ Retina
Specify a standard and an optional retina image.
// html
<img class="dvz-lazy" src="img/transparent.gif" data-src="http://dummyimage.com/1400x700/2a2a2a/fff.png" data-src-retina="http://dummyimage.com/2800x1400/2a2a2a/fff.png">
// js
slothyLoader({selector: ".dvz-lazy"})
Non-responsive w/ Retina, smaller element
Basic example always loads the same image, regardess of element width.
// html
<img class="dvz-lazy" src="img/transparent.gif" data-src="http://dummyimage.com/1400x700/3a3a3a/fff.png" data-src-retina="http://dummyimage.com/2800x1400/3a3a3a/fff.png">
// js
slothyLoader({selector: ".dvz-lazy"})
Non-responsive w/ Retina 3x
Specify a standard image, an optional retina image at double the original resolution, and an optional retina 3x image at three times the original resolution. If you don't specify a regular retina image (2x), then the standard image will load on retina screens (which we consider to be anything that has a devicePixelRatio above 1). You can force a 3x device pixel ratio by using your device toolbar in your browser's dev tools.
// html
<img class="dvz-lazy" src="img/transparent.gif" data-src="http://dummyimage.com/1400x700/3a3a3a/fff.png" data-src-retina="http://dummyimage.com/2800x1400/3a3a3a/fff.png" data-src-retina3x="http://dummyimage.com/4200x2100/3a3a3a/fff.png">
// js
slothyLoader({selector: ".dvz-lazy"})
Responsive
Go beyond a single source by providing a URL that has a width as part of the path or name. This example works with retina patterns too.
// html
<img class="dvz-lazy" src="img/transparent.gif" data-pattern="img/ar-{{size}}.jpg" data-widths="[320, 900, 1500]">
// js
slothyLoader({selector: ".dvz-lazy"})
Responsive, smaller element
Load a smaller image, if possible.
// html
<img class="dvz-lazy" src="img/transparent.gif" data-pattern="img/ar-{{size}}.jpg" data-widths="[320, 900, 1500]">
// js
slothyLoader({selector: ".dvz-lazy"})
Responsive w/ Slugs
You can select a sized image that doesn't use the width value in the file name or path.
// html
<img class="dvz-lazy" src="img/transparent.gif" data-pattern="img/ar2-{{size}}.jpg" data-widths='[{"size":320,"slug":"small"}, {"size":900, "slug":"medium"}, {"size":1500, "slug":"large"}]'>
// js
slothyLoader({selector: ".dvz-lazy"})
Callback
Pass in a callback to excute custom code after the src attribute has been changed. That's how the updating "elements loaded" bar below works.
//html
<img class="callback" src="img/transparent.gif" data-src="http://dummyimage.com/1400x700/5a5a5a/fff.png">
// js
var totalLoaded = 0;
slothyLoader({ selector: "img.callback", threshold: 100}, function() {
totalLoaded += 1;
document.getElementById("total").innerHTML = totalLoaded;
});
Custom Source Function
Need fancier logic to determine the source path? You can write your own.
//html
<img class="custom" src="img/transparent.gif">
// js
slothyLoader({
selector: "img.custom",
threshold: 100,
getSource: function($el) {
var width = $el.offsetWidth;
var height = Math.round(width * 0.5625);
return 'http://placekitten.com/'+width+'/'+height;
}
});
Best Fit
The best-fit method used internally can also be used in your callbacks and custom source functions. Pass in a target width and an array of possible values to find the best value.
//html
<img class="bestfit" src="img/transparent.gif">
// js
slothyLoader({
selector: "img.bestfit",
threshold: 100,
getSource: function($el) {
var width = slothyLoader.bestFit($el.offsetWidth, [200, 700, 900, 1200]);
var height = Math.round(width * 0.5625);
return "http://placekitten.com/" + width + "/" + height;
}
});
Video
Images aren't the only things with 'src' attributes. Try a video.
// html
<video class="dvz-lazy" autoplay loop data-pattern="examples/earth-{{size}}.mp4" data-widths="[640, 960, 1280]"></video>
// js
slothyLoader({selector: ".dvz-lazy"})
Set Element Height Programmatically
Often in responsive applications it's useful to set the height of an element before the source is loaded so the element will pre-fill the correct amount of space. In this example, because iFrames also have src attributes but need their sizes specified to be useful, we'll set the height via the plugin. The height is determined by multipling the element width by the 'data-ratio' vaule. Note: This example will not be responsive because the iFrame content from YouTube isn't smart enough to repsond to the changing viewport.
// html
<iframe class="iframe" data-src="//www.youtube.com/embed/c8aFcHFu8QM" data-ratio="0.5625" frameborder="0" allowfullscreen></iframe>
// js
slothyLoader({selector: ".iframe", threshold: 300, setHeight: true})
Completely Custom Behavior /w Callback
Need more control than custom source path generation? For example, you might want to completely rewrite the contents of your element. You can have your callback do all the work, sidestepping much of SlothyLoader's functionality.
// html
<div class="override"></div>
// js
slothyLoader({
selector: "div.override",
threshold: 100,
setSourceMode: false // this is the important bit!
}, function() {
cb.call(this);
var height = Math.ceil(this.offsetWidth * 0.5625);
this.innerHTML = '<p style="text-align:center; height: '+height+'px; line-height:'+height+'px;-webkit-animation: pulse 10s infinite alternate;">Boom!</p>'
});