Skip to content
The W3C IntersectionObserver Polyfill, in AMD
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.md
intersection-observer.amd.js
intersection-observer.amd.min.js
intersection-observer.js
package-lock.json
package.json

README.md

IntersectionObserverAMD

The original, official W3C IntersectionObserver Polyfill, 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.

How to use

Insert Require.JS's script (or another AMD module loader) in your page.

<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/bin/r.min.js"></script>

In your script, create a dependencies array. For example, if you need IntersectionObserver polyfill and vanilla-lazyload, do like that:

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.

// _ 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 - SOURCE

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.

You can’t perform that action at this time.