https://github.com/verlok/intersectionobserveramd
The W3C IntersectionObserver Polyfill, in AMD
https://github.com/verlok/intersectionobserveramd
Last synced: 7 months ago
JSON representation
The W3C IntersectionObserver Polyfill, in AMD
- Host: GitHub
- URL: https://github.com/verlok/intersectionobserveramd
- Owner: verlok
- Created: 2019-02-24T21:40:35.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-14T01:23:07.000Z (over 5 years ago)
- Last Synced: 2025-02-25T07:47:55.581Z (7 months ago)
- Language: JavaScript
- Size: 20.5 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# IntersectionObserverAMD
The original, official [W3C IntersectionObserver Polyfill](https://github.com/w3c/IntersectionObserver), served in AMD.
## Why AMD?
Because with AMD you can load the `IntersectionObserver` **only where it's needed**, as dependency of another script, e.g. [vanilla lazyload](https://github.com/verlok/lazyload).
## How to use
Insert [Require.JS](https://requirejs.org/)'s script (or another AMD module loader) in your page.
```html
```
In your script, create a dependencies array.
For example, if you need `IntersectionObserver` polyfill and vanilla-lazyload, do like that:
```js
var dependencies = [
"IntersectionObserver" in window
? null
: "https://cdn.jsdelivr.net/npm/intersection-observer-amd@2.1.0/intersection-observer.amd.min.js",
"https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.3/dist/lazyload.amd.min.js"
];
```
Finally, use require to execute your script, having the dependecies loaded in the right order and ready to use.
```js
// _ is always null, since the polyfill is attached to the window object
require(dependencies, function(_, LazyLoad) {
window.ll = new LazyLoad({
elements_selector: ".lazy",
// More options?
});
});
```
[DEMO](https://verlok.github.io/lazyload/demos/amd_polyfill.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/amd_polyfill.html)
## How to maintain this package
To update this in case the guys at W3C improve their polyfill:
```
rollup --format=amd --output=intersection-observer.amd.js -- intersection-observer.js
```
## Changelog
#### 2.1.0
Updated IntersectionObserver polyfill to version 0.7.0.
#### 2.0.0
First working version.