Image Placeholders

With lazy load browser triggers many scroll events. Finding out the dimention and position of 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 placeholder and how to use them with gumlet.js

1. Placeholder

As name suggest, we can use 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 blured 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">