Image Placeholders

How to use placeholders while images are loading

With lazy loading, the browser triggers many scroll events. Finding out the dimension and position of the image can cause layout re-calculation which could cause stuttering. There are multiple ways to handle this scenario; here we will focus on solving it using placeholders and how to use them with gumlet.js

1. Placeholder

As the name suggests, we can use a dummy placeholder before loading the actual image.

<img data-src="https://demo.gumlet.io/forest.jpg" src="https://demo.gumlet.io/logo.png" alt="Forest Image">

2. Blur image

Displaying low resolution blurred version of an image while the original image is being lazy loaded.

<img data-src="https://demo.gumlet.io/forest.jpg" src="https://demo.gumlet.io/forest.jpg?blur=30" alt="Forest Image">