Skip to main content

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 load.

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