Rendering Data — Programuoki

Code

js/observers.js — IntersectionObserver

In the code column — js/observers.js. Two functions, both built on IntersectionObserver.

revealOnScroll(elements) — cards "fade in" as you scroll. For each card we watch whether it has entered the viewport; when it has, we add the CSS class revealed (the animation lives in style.css).

Three details that separate amateur code from tidy code:

observer.unobserve(entry.target) after the reveal — essential. A card appears once and won't change again; if you never stop observing, the observer "watches" it forever and wastes resources for nothing.
prefers-reduced-motion — if the user has disabled animations at the system level (motion sickness), we add revealed immediately with no fade. Accessibility, not an option.
threshold and rootMargin — exactly when to fire (when 10% is visible, but 40px before it reaches the bottom).

onReachEnd(sentinel, onReach) shows how the same observer powers infinite scroll: you place an invisible "sentinel" element at the end of the list, and when it appears, you call "load more". That's how every modern feed works.

Verify. With the real pictures from lesson 4:

1. The gallery shows a grid of cards (newest on top).
2. Scrolling down, cards fade in smoothly.
3. Images far down the page only download as you approach (loading="lazy").

Gotcha (watching forever). Forget unobserve() — and the observer keeps getting called for every card on every scroll, long after they've appeared. The page slows down for no obvious reason. The rule: when the observation's job is done — unobserve(). (The same principle as cleaning up event listeners.)

observers.js CREATE

Create this file in js/

// Browser observer APIs — modern JavaScript that replaces old scroll-event hacks.
//
// The old way to detect "is this element visible?" was to listen to scroll
// events and call getBoundingClientRect() on every pixel of scrolling. That
// runs on the main thread, hundreds of times a second, and janks the page.
//
// IntersectionObserver does the same job asynchronously, off the main thread,
// and only tells you when something ACTUALLY crosses the threshold.

/**
 * Fade elements in as they scroll into view.
 * Notice we UNOBSERVE after the first reveal — otherwise the observer keeps
 * firing forever for elements that will never change again.
 */
export function revealOnScroll(elements) {
  // Respect the user's motion preference — some people get motion sickness.
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    elements.forEach(el => el.classList.add('revealed'));
    return;
  }

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('revealed');
          observer.unobserve(entry.target);   // job done — stop watching
        }
      });
    },
    {
      threshold: 0.1,             // fire when 10% of the element is visible
      rootMargin: '0px 0px -40px 0px',   // ...but 40px before it reaches the bottom
    }
  );

  elements.forEach(el => observer.observe(el));
  return observer;
}

/**
 * Infinite scroll: call `onReach` when a sentinel element scrolls into view.
 * This is how "load more" works on every modern feed.
 */
export function onReachEnd(sentinel, onReach) {
  const observer = new IntersectionObserver(
    (entries) => {
      if (entries[0].isIntersecting) onReach();
    },
    { rootMargin: '200px' }      // start loading 200px BEFORE the user gets there
  );

  observer.observe(sentinel);
  return observer;
}