Implement IntersectionObserver in TypeScript for lazy-loading images
Tests precise DOM typing and observer lifecycle. A strong answer types the callback as receiving IntersectionObserverEntry[], narrows entry.target to HTMLImageElement, swaps data-src to src, and calls unobserve.
Tests whether you can strongly type a native Web API callback and handle Element narrowing. A great answer explicitly types the callback as (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void, iterates entries, checks entry.isIntersecting, narrows entry.target to HTMLImageElement to safely mutate src, then calls observer.unobserve(entry.target) to prevent memory leaks. Red flag: using any for the entries array, leaving target as the generic Element type without narrowing, or forgetting to disconnect after loading.
Read the original → developer.mozilla.org
- #typescript
- #web apis
- #intersectionobserver
- #dom
- #performance
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.