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