API documentation

Options

Option Type Default Description
offset int 0 Load images when user scrolls to ... pixels before image appears
throttle int 250 Throttle amount of lookups while scrolling or resizing (once every ... ms)
placeholder string pixel Use this placeholder image. Can be a relative/absolute URL or data-URI. Defaults to a transparent pixel. Can also be set per-image by `data-src-placeholder` attribute.
attribute string src Custom data attribute for image source
container jQuery object $(window) Scrolling container
breakpoints array [] Array of breakpoint objects containing a minimum width and a data attribute name (i.e. `{ minWidth: 768, attribute: 'data-src-md' }`. Use a custom data attribute for image source once a corresponding minimum window width has been exceeded.
debug bool false Prints debug messages to the console when true (doesn't work in minified version)
loading function null DEPRECATED Use event instead
loaded function null DEPRECATED Use event instead

Events

All events are namespaced, you can listen to them with just the event name (i.e. loading) or use the fully qualified name (i.e. loading.unveil) in case of conflicts with other plugins.

Emitters

Name Description
loading Fired on the target element once a image starts loading
loaded Fired on the target element once a image has been loaded
// example
$('body').on('loaded.unveil', 'img.lazy', function () {
    imagesLoaded++;
});

Methods

Name Description
unveil Trigger the loading of an image on the target element
lookup Manually lookup images in the viewport that haven't been unveiled yet, call on the container (window by default).
// example, i.e. after tab change
$('img.lazy').trigger('unveil');

Deactivate

You can remove all of unveils functionality by removing all event handlers:

// example
$('img.lazy').trigger('destroy.unveil');
//or
$('.unveilContainer').trigger('destroy.unveil');