Lazy Image Style

Tags

A module that resembles "Lazy Image Loader" but works on a completely different principle. Image Lazy Loader loads the images after the other content is loaded and displayed.

This module loads the images as you see them. On scrolling, loading thus begins. You can set how many pixels you want as a buffer. Default ... images that are less than 100 px below, are loaded.

In the settings of the module you set what types of imge styles you want to provide with this tool. Images that are not loaded, are replaced by a 1X1px white image. The intersection Observer API does not work for me at the time of this writing.

It now comes down to have content in a field that you set with this image style. (Images and responsive images can be used).

Scrolling down ... you see now the pictures come gradually. The 'blue' effect gives you this... the image is displayed quickly but blurred.

 

A fraction of a second later, they are sharp. For those who like this..

 

Due to smartphones you need to choose as temporary imagestyle something like big 480X480. The can not handle the default settings.