Elements loaded

jQuery LaziestLoader Plugin Examples

Non-responsive

The most basic method simply sets the src attribute as the element enters the viewport.

<img class="lazy" src="img/transparent.gif" data-src="http://dummyimage.com/1400x700/753e75/fff.png">

Non-responsive w/ Retina

Specify a standard and an optional retina image.

<img class="lazy" src="img/transparent.gif" data-src="http://dummyimage.com/1400x700/2a2a2a/fff.png" data-src-retina="http://dummyimage.com/2800x1400/2a2a2a/fff.png">

Non-responsive w/ Retina, smaller element

Basic example always loads the same image, regardess of element width.

<img class="lazy" src="img/transparent.gif" data-src="http://dummyimage.com/1400x700/3a3a3a/fff.png" data-src-retina="http://dummyimage.com/2800x1400/3a3a3a/fff.png">

Responsive

Go beyond a single source by providing a URL that has a width as part of the path or name.

<img class="lazy" src="img/transparent.gif" data-pattern="mg/ar-{{size}}.jpg" data-widths="[320, 900, 1500]">

Responsive, smaller element

Load a smaller image, if possible.

<img class="lazy" src="img/transparent.gif" data-pattern="mg/ar-{{size}}.jpg" data-widths="[320, 900, 1500]">

Responsive w/ Slugs

You can select a sized image that doesn't use the width value in the file name or path.

<img class="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"}]'>

Callback

Pass in a callback to excute custom code after the src attribute has been changed. That's how the fancy black bar above works.

//html
<img class="callback" src="img/transparent.gif" data-src="http://dummyimage.com/1400x700/5a5a5a/fff.png">

// js
var totalLoaded = 0;
$("img.callback").laziestloader({ threshold: 100}, function() {
    totalLoaded += 1;
    $("#total").html(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
$("img.custom").laziestloader({
    threshold: 100,
    getSource: function($el) {
        var width = $el.width();
        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.

<video class="lazy" autoplay loop data-pattern="http://joshwilliams.com/projects/sunset-flipbook/videos/bridge-{{size}}.mp4" data-widths="[640, 900]"></video>

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-height-multiplier' 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/fNlxKH9Jtmc" data-height-multiplier="0.5625" frameborder="0" allowfullscreen></iframe>

// js
$('.iframe').laziestloader({threshold:300});
                

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 LaziestLoader's functionality.

// html
<div class="override"></div>

// js
$('div.override').laziestloader({
    threshold: 100,
    setSourceMode: false // this is the important bit!
}, function(){
    var height = Math.round($(this).width() * 0.5625);
    $(this).html('<p style="text-align:center; height: '+height+'px; line-height:'+height+'px;-webkit-animation: pulse 10s infinite alternate;">Boom!</p>')
});