Load everything lazily with IntersectionObserver

Jan 23, 2019 • 2 min read

Just after I've released 1.8 version of site and published post Implementing medium like tooltip, I had understood its page loads 6 mb! And it is absolutely inappropriate for my blazing fast site. The most significant change of this release was integration with codesandbox: all embedded links to it are transformed to iframes. Results I've got in network tab of chrome dev tools also had met my expectations: most of resources were loaded by iframes.

Obvious solution is to load iframes lazily - when they appear in the viewport. So here is a code I came up with:

First of all rename src attribute of iframe to something else (e.g. data-src), so it won't load anything during initial render.

<iframe data-src="https://nikitakirsanov.com"> </iframe>

And insert src when iframe intersects with viewport:

// react hooks fits perfect for extracting
// such type (not only) of reusable logic
let useLazyIframe = () =>
  // we need to register our observer after our component mounted
  useEffect(
    () => {
      let observer = new IntersectionObserver(
        entries => {
          entries
            // filter only visible iframes
            .filter(e => e.isIntersecting)
            .forEach(({ target: $el }) => {
              // iframe will start loading now
              $el.setAttribute('src', $el.getAttribute('data-src'))
              // no need to observe it anymore
              observer.unobserve($el)
            })
        },
        {
          // we'll load iframe a bit beforehand
          rootMargin: '10%',
        }
      )

      document
        .querySelectorAll('iframe[data-src]')
        .forEach($el => observer.observe($el))

      // do not forget to clean up on component unmount
      return () => observer.disconnect()
    },
    [
      /* we need to register observer once */
    ]
  )

That's it!

Read more:

Intersection Observer API

IntersectionObserver’s Coming into View

React hooks overview

Next reads

The simplest example of scheduling on the main thread

Feb 19, 2019 • 4 min read

I have recently read several articles related to relatively new react reconciliation algorithm (aka react fiber). And I wondered how to implement something really simple to explain idea of scheduling and splitting work into chunks. So here is my thoughts.

Implementing medium like tooltip

Jan 20, 2019 • 4 min read

Do you know that if you select post text on medium a tooltip with several options (tweet, highlight...) will appear? Have you used it? I would like to tell you how to create similar one and about DOM API I've learned during implementation.

Refactor like no one is watching

Apr 19, 2020 • 6 min read

Short story about using AST transformation to refactor the code. Like some codemods you might used.