Lazy loading is a programming practice in which a component is loaded only at the time of need. This gives great performance boost especially when the time taken to load a component is significant, and there are several such components in an application.
In webpages, images/social-widgets/ads/videos etc. contribute majorly to the increase in page load time because of their size or the resources loaded by them. Thus, to decrease page load time, it's absolutely necessary to lazy load all such components which are not critical, at the time of need.
Existing lazy loading libraries hook up to the scroll event or use a periodic timer and call
getBoundingClientRect() on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to
getBoundingClientRect() forces the browser to re-layout the entire page and will introduce considerable jank to your website.
Making this more efficient and performant is what IntersectionObserver is designed for, and it’s landed in Chrome 51. IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.
- is a light-weight library, just 535 bytes minified & gzipped,
- has NO DEPENDENCIES :)
- allows lazy loading of dynamically added elements as well.
# You can install lozad with npm $ npm install --save lozad # Alternatively you can use Yarn. $ yarn add lozad # Another option is to use Bower. $ bower install lozad
Or load via CDN and include in the
head tag of your page.
In HTML, add an identifier to the element (default selector identified is
<img class="lozad" data-src="image.png" />
All you need to do now is just instantiate Lozad as follows:
// lazy loads elements with default selector as '.lozad' const observer = lozad(); observer.observe();
For details, checkout Lozad.js repo on Github