Download
Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading. This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader utility by Matt Mlinac. New version loans heavily from a blog post by Dean Hume. By default Lazy Load assumes the URL of the original high resolution image can be found in data-src attribute. You can also include an optional low resolution placeholder in the src attribute. If you prefer you can explicitly pass the image elements to the factory. Use this for example if you use different class name. Low resolution placeholder ie. the “blur up” technique. Lazyloaded Responsive images are supported via data-srcset. If browser does not support srcset and there is no polyfill the image from data-src will be shown.
Features
- Blur up images
- Responsive images
- Inlined placeholder image
- Reduce the amount of request you can use data uri images as the placeholder
- You can install beta version with yarn or npm
- If you use jQuery there is a wrapper which you can use
Project Samples
