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');