reuters-graphics/graphics-svelte-components

Hazy load images

Opened this issue · 1 comments

For ai2svelte and other images that take a moment to load, preload a blurred version and render on page, then show the actual image when it is loaded and in view. Alternatively, consider a generic background-color fill for images and ai2svelte blocks, that show up before the images load and are overridden with the images eventually.

This is to take care of jumpy layout/ blank divs issues when images take time to load.

We'd need the dimensions of the image to do this correctly, I think. We do have those in the generated manifest.json so we just need a smarter image component that uses that manifest file better.

But for ReASonS I wanna peg this to splitting out image processing in reuters-graphics/graphics-kit-publisher#42 and do a clean sweep of image handling with a new Image component.