IntersectionObserver Alternatives

IntersectionObserver reviews and mentions

• Lazy loading of images in masonry layout?
  1 project | /r/nicegui | 7 Jul 2023

  You should only create the images (or set the src) for the images which are visible to the user. See our infinite scroll example for a naive implementation. More elaborated code might use the https://www.w3.org/TR/intersection-observer/.

• Safari isn't protecting the web, it's killing it
  3 projects | news.ycombinator.com | 28 Jul 2021

  I got a little curious on the statuses of these standards and went on a bit of searching.

  > CSS contain (CSS Containment Module Level 2) - First published in 2019, still Editor's Draft[1]. Not supported by Safari/WebKit.

  > CSS offset-path (Motion Path Module Level 1) - First published in 2015, still Editor's Draft[2]. Not supported by Safari/WebKit.

  > CSS overflow-anchor (CSS Scroll Anchoring Module Level 1) - First published in 2020, still Editor's Draft[3]. Not supported by Safari/WebKit.

  > Resolution media queries (dppx) - W3C Recommendation since 2012[4]. Not supported by Safari/WebKit.

  > :focus-visible (Selectors Level 4) - First published in 2011, still Editor's Draft[5]. Not supported by Safari/WebKit.

  - Touch Events - W3C Recommendation since 2013[6]. Supported on iOS 3.2 (2010). I assume the author meant Pointer Events[7] which became W3C recommendation since 2019, and supported on 13.2 (2019).

  > BroadcastChannel - WHATWG Living Standard[8]. Blocked by privacy concern on WebKit side since 2020[9]. Initial support landed in WebKit trunk as of 2021-07.[10]

  > beforeprint/afterprint - WHATWG Living Standard[11]. Supported by Safari/WebKit since 2019 (iOS 13).

  > Regex Lookbehind - ECMAScript 2018[12]. Not supported by Safari/WebKit.

  > scrollIntoView (CSSOM View Module) - First introduced in CSSOM View Module since 2011, still Editor's Draft[13]. Not supported by Safari/WebKit.

  > Screen Orientation API - First committed in wc3/screen-orientation in 2012, still a W3C Working Draft[14]. Not supported by Safari/WebKit.

  > Date and time input types - WHATWG Living Standard[15], partial support by Safari/WebKit since 2012 (iOS 5) but no week/min/max.

  > Service Workers - W3C Candidate Recommendation since 2019[16]. Supported by Safari/WebKit since 2018 (iOS 14.5).

  - AbortSignal - WHATWG Living Standard[17]. Supported by Safari/WebKit since 2018 (iOS 11.3)

  - Intersection Observer - First published in 2017, still W3C Working Draft[18]. Supported by Safari/WebKit since 2019 (iOS 12.2).

  - Client-side form validation - WHATWG Living Standard[19]. Supported by Safari/WebKit since 2017 (iOS 10.3).

  [1]: https://drafts.csswg.org/css-contain/#contain-property

  [2]: https://drafts.fxtf.org/motion/#offset-path-property

  [3]: https://drafts.csswg.org/css-scroll-anchoring/#exclusion-api

  [4]: https://www.w3.org/TR/css3-mediaqueries/#resolution

  [5]: https://drafts.csswg.org/selectors-4/#the-focus-visible-pseu...

  [6]: https://www.w3.org/TR/touch-events/

  [7]: https://www.w3.org/TR/pointerevents/

  [8]: https://html.spec.whatwg.org/multipage/web-messaging.html#br...

  [9]: https://github.com/whatwg/html/issues/5803

  [10]: https://bugs.webkit.org/show_bug.cgi?id=227924

  [11]: https://html.spec.whatwg.org/multipage/timers-and-user-promp...

  [12]: https://262.ecma-international.org/9.0/

  [13]: https://drafts.csswg.org/cssom-view/#dom-element-scrollintov...

  [14]: https://www.w3.org/TR/screen-orientation/

  [15]: https://html.spec.whatwg.org/multipage/input.html#date-state...

  [16]: https://www.w3.org/TR/service-workers/

  [17]: https://dom.spec.whatwg.org/#abortsignal

  [18]: https://www.w3.org/TR/intersection-observer/

  [19]: https://html.spec.whatwg.org/multipage/forms.html#client-sid...

• Revealing Contents on Scroll Using JavaScript’s Intersection Observer API
  2 projects | dev.to | 22 May 2021

  W3.Org

• Adding IntersectionObserver polyfill
  1 project | /r/nextjs | 5 May 2021

  I've used https://github.com/w3c/IntersectionObserver/tree/main/polyfill in the past and it's pretty much just import and forget.

• Endless Scroll / Infinite Loading with Turbo Streams & Stimulus
  4 projects | dev.to | 3 May 2021

  // app/javascript/controllers/infinite_scoll_controller.js import { Controller } from "stimulus" export default class extends Controller { static targets = ["scrollArea", "pagination"] connect() { this.createObserver() } createObserver() { const observer = new IntersectionObserver( entries => this.handleIntersect(entries), { // https://github.com/w3c/IntersectionObserver/issues/124#issuecomment-476026505 threshold: [0, 1.0], } ) observer.observe(this.scrollAreaTarget) } handleIntersect(entries) { entries.forEach(entry => { if (entry.isIntersecting) { this.loadMore() } }) } loadMore() { const next = this.paginationTarget.querySelector("[rel=next]") if (!next) { return } const href = next.href fetch(href, { headers: { Accept: "text/vnd.turbo-stream.html", }, }) .then(r => r.text()) .then(html => Turbo.renderStreamMessage(html)) .then(_ => history.replaceState(history.state, "", href)) } }

• Create an infinite scrolling blog roll in Rails with Hotwire
  2 projects | dev.to | 22 Mar 2021

  import { Controller } from "stimulus" export default class extends Controller { static targets = ["entry"] static values = { path: String, } connect() { this.createObserver(); } createObserver() { let observer; let options = { // https://github.com/w3c/IntersectionObserver/issues/124#issuecomment-476026505 threshold: [0, 1.0] }; observer = new IntersectionObserver(entries => this.handleIntersect(entries), options); observer.observe(this.entryTarget); } handleIntersect(entries) { entries.forEach(entry => { if (entry.isIntersecting) { // https://github.com/turbolinks/turbolinks/issues/219#issuecomment-376973429 history.replaceState(history.state, "", this.pathValue); } }); } }

• A note from our sponsor - InfluxDB
  www.influxdata.com | 2 May 2024

  Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality. Learn more →