Use image placeholders to avoid layout jumping when lazy-loading images
Problem to solve
When lazy-loaded images are rendered in a thread, it causes the layout to jump around.
This is especially painful when scrolling upwards through a long thread with lots of images. It also confuses our "jump to comment" feature when a specific comment is linked in the URL.
Proposal
Before an image is loaded, render an identically-sized placeholder element in place of the image. Once the image is loaded, replace the placeholder with the actual image.
Further details
The trickiest part is getting the image dimensions before the image is loaded. Some ideas that have been mentioned:
- Embed the image's dimensions in the image's name at upload time. When displaying the image, some JavaScript parses this file name and creates an appropriate placeholder if the name is formatted correctly.
- Generate a low-quality thumbnail image for each upload to be used as the placeholder mentioned in the Proposal section above.
- Store the image dimensions at upload time and render this information into the page when displaying the image.
Some relevant links:
What does success look like, and how can we measure that?
When scrolling through a thread, the layout is stable from the moment it is first rendered.