background-image
in stylesheets.data-z
String
data-zz
Array
data-b
String
selector
entry accepts multiple configuration formats including a string, an Array, a Node, NodeList or a JSON object with observer
configuration.$lazy
as a simple inview script.false
from a custom inview callback, the observer will not be removed and will trigger the callback again when the element moves in or out of view.inview
: a function to call when the element moves into view.out-of-view
a function to call when the element moves out of viewafter_inview
a function to call with the default inview-method after src
and srcset
have been rewritten.data-src
based lazy loading of images, you can use an after_inview
callback.IntersectionObserver
callback.background-image
in stylesheets.webp
rewrite.webp
images for browsers that support Google's WebP format. It saves a server-side redirect and it adds WebP support to the <img>
tag.dist/lazy+webp...
files to enable it.<img onerror>
to fallback to the original image when the .webp
image is 404.data-webp="no"
. To disable it for a specific $lazy
configuration, set the 4th argument to false
.$lazybg
supports WebP rewrites by using dist/lazybg+webp.js
.data-z
JSON configContent-Security-Policy
the script can be configured using a data-z
attribute on the script source element.data-zz
. The attributes accepts a JSON array with configurations.$async
with data-c
based config$async
timing method method
defines window.$lazypoly
which will automatically load the polyfill for browsers that require the polyfill. It uses localStorage
for instant loading.$lazy
without $async
, you can manually define window.$lazypoly
with a function that returns a Promise
or a object containing a .then
method.$async
you can alternatively use window.$lazypoly
with a string or a object to pass to $async
which could load anything.$lazy
inline, the data-poly
attribute enables to define a string to pass to $async.js
.