You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> Highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API
- lazy loads elements performantly using pure JavaScript,
8
9
- is a light-weight library, *just **535 bytes*** minified & gzipped,
9
10
- has NO DEPENDENCIES :)
10
-
- lazy loads elements performantly using pure JavaScript.
11
+
-allows lazy loading of dynamically added elements as well.
11
12
12
-
It is written with an aim to lazy load images, ads, videos or any other element using the recently added [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) with tremendous performance benefits.
13
+
It is written with an aim to lazy load images, iframes, ads, videos or any other element using the recently added [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) with tremendous performance benefits.
13
14
14
-
Yet another Lazy Loading JavaScript library, why?
15
-
-----
16
-
Existing lazy loading libraries hook up 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.
15
+
## Table of Contents
17
16
18
-
Making this more efficient and performant is what [IntersectionObserver](https://developers.google.com/web/updates/2016/04/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.
## Yet another Lazy Loading JavaScript library, why?
27
+
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.
28
+
29
+
Making this more efficient and performant is what [IntersectionObserver](https://developers.google.com/web/updates/2016/04/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.
**Note**: **lozad.js** supports AMD and commonJS module pattern out of the box.
61
+
**Note**: `lozad.js` supports AMD and commonJS module pattern out of the box.
55
62
56
-
Usage
57
-
-----
63
+
## Usage
58
64
59
65
In HTML, add an identifier to the element (default selector identified is `lozad` class):
60
66
```html
@@ -63,14 +69,14 @@ In HTML, add an identifier to the element (default selector identified is `lozad
63
69
64
70
All you need to do now is just instantiate Lozad as follows:
65
71
```js
66
-
constobserver=lozad(); // lazy loads elements with selector as '.lozad'
72
+
constobserver=lozad(); // lazy loads elements with default selector as '.lozad'
67
73
observer.observe();
68
74
```
69
75
or with custom options:
70
76
```js
71
77
constobserver=lozad('.lozad', {
72
78
rootMargin:'10px 0px', // syntax similar to that of CSS Margin
73
-
threshold:0.1// ratio of image convergence
79
+
threshold:0.1// ratio of element convergence
74
80
});
75
81
observer.observe();
76
82
```
@@ -100,25 +106,20 @@ observer.observe();
100
106
// ... code to dynamically add elements
101
107
observer.observe(); // observes newly added elements as well
102
108
```
103
-
Browser Support
104
-
-----
109
+
## Browser Support
105
110
106
111
Available in [latest browsers](http://caniuse.com/#feat=intersectionobserver). If browser support is not available, then make use of this [polyfill](https://www.npmjs.com/package/intersection-observer).
107
112
108
-
Contributing
109
-
-----
113
+
## Contribute
110
114
111
115
Interested in contributing features and fixes?
112
116
113
117
[Read more on contributing](./CONTRIBUTING.md).
114
118
115
-
Changelog
116
-
-----
119
+
## Changelog
117
120
118
121
See the [Changelog](https://github.com/ApoorvSaxena/lozad.js/wiki/Changelog)
0 commit comments