React smart img

Screen.Recording.2024-08-12.at.11.41.32.AM.mov

Demonstrates:

• ReactDOM preload function to insert preload link tags into document head - https://react.dev/reference/react-dom/preload
• Browser native image lazy loading capability - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#lazy

Gotcha

At time of writing, a bug in Firefox prevents lazy loading unless the loading attribute is set before the src attribute!

Setup

pnpm install

pnpm dev

Live example

https://stellular-taiyaki-fc3266.netlify.app/