To lazyload images, backgrounds and videos, we use lazysizes. Be sure to read the documentation.
How to use
- Make sure the script is included
- Read the lazysizes documentation
- For images, change your markup to
- For backgrounds, change your markup to
Lazysizes also supports responsive images, but again, just read the documentation. If you need support for background-images, videos and what not see unveilhooks.
A lazy-loaded image
A lazy-loaded responsive image
Resize your browser (a refresh is needed in some browsers). If you'd like to make it crossbrowser, consider including Picturefill 3 (in alpha as of this writing) or Respimage.