LazyLoad srcset
Lazyload images with a srcset for better performance. Also creates background-image on parent element if browser doesn't support object-fit.
Installation
Using NPM:
npm install lazyload-srcset --save
Using Yarn:
yarn add lazyload-srcset
How to use
Make sure the image elements on the page have a data-srcset instead of a srcset attribute. Set the src to a low resolution image.
Import the library in and run on init. You can pass the parent element of images to lazyload as a parameter. Defaults to body.
; const init = { const scope = document; ;}; window;
If the parent of the image has data-bg
as attribute and the browser doesn't support object-fit
, the parent element will get the image as background-image
with background-size: cover
.
Dynamic content
If your content is dynamic (for example when using React), you can give a second parameter so that the srcset is set on the onload
event of the img.
;