The original, official W3C IntersectionObserver Polyfill, served in AMD.
Because with AMD you can load the IntersectionObserver
only where it's needed, as dependency of another script, e.g. vanilla lazyload.
Insert Require.JS's script (or another AMD module loader) in your page.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/intersection-observer.amd.min.js",
"https://cdn.jsdelivr.net/npm/[email protected]/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?
});
});
To update this in case the guys at W3C improve their polyfill:
rollup --format=amd --output=intersection-observer.amd.js -- intersection-observer.js
Updated IntersectionObserver polyfill to version 0.7.0.
First working version.