Ah yes. Lazy images. Magical content that only loads when you need it. I learned to code with Haskell, so I'm partial to laziness.

Also, my job depends on it. I work with a bunch of talented designers who make very graphic websites. Tens of MB per page, after JPG optimization. Besides making smaller images and using srcsets, we use lazy loading.

The first piece of the puzzle is detecting when the img elements come onscreen. It's not as simple as a listener or callback. We have some hard requirements: