Intersection Observer API All In One

Intersection Observer API All In One

Intersection Observer / 交叉观察者

let options = {
  root: document.querySelector("#scrollArea"),
  rootMargin: "0px",
  threshold: 1.0,
};

let observer = new IntersectionObserver(callback, options);

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

https://developer.mozilla.org/en-US/play

demos

https://cdn.xgqfrms.xyz/images/lazyload/index.html

Intersection Observer

实现图片延迟加载

https://c7sky.com/lazy-loading-images-using-intersection-observer.html

懒加载、吸顶、触底

https://juejin.im/post/5d665133e51d4561c83e7c83

css sticky

https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

https://codepen.io/xgqfrms/pen/dyogwLB

refs

https://codepen.io/xgqfrms/pen/PoEzGNw?editors=0010

https://medium.com/fasal-engineering/image-lazy-loading-using-browsers-intersection-observer-api-a-step-by-step-guide-with-examples-b1a867614e8

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---