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.
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
With the HTML in place you can then initialize the plugin using the factory method. If you do not pass any settings or image elements it will lazyload all images with class
If you prefer you can explicitly pass the image elements to the factory. Use this for example if you use different class name.
let images = document;;
If you prefer you can also use the plain old constructor.
let images = document;images;
To use the additional API you need to assign the plugin instance to a variable.
let lazy = ;
To force loading of all images use
To destroy the plugin and stop lazyloading use
destroy() does not load the out of viewport images. If you also
want to load the images use
Additional API is not avalaible with the jQuery wrapper.
If you use jQuery there is a wrapper which you can use with the familiar old syntax. Note that to provide BC it uses
data-original by default. This should be a drop in replacement for the previous version of the plugin.
Low resolution placeholder ie. the "blur up" technique. You can see this in action in this blog entry. Scroll down to see blur up images.
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.
To reduce the amount of request you can use data uri images as the placeholder.
This is still work in progress. You can install beta version with yarn or npm.
$ yarn add lazyload $ npm install lazyload
All code licensed under the MIT License. All images licensed under Creative Commons Attribution 3.0 Unported License. In other words you are basically free to do whatever you want. Just don't remove my name from the source.