
A pinterest-style lazy loading module for drupal
This lightweight module will automatically provide lazyloading of images on your website in a pinterest-style color scheme. It fetches the main color of your image and serves it until your image is loaded.
The module is great for performance and SEO, since it only loads images that are actually viewed in the viewport. Especially on mobile devices this results in faster loading of your pages.
Masonry gallery































Text with image
In the column on the right you see a light red color (or below on mobile devices). When scrolling wide enough, the colored image changes to the final image.
The effect is perfect for blogs about fashion, food or when photography is an important aspect of your website.
But it is not only the effect that is important. On content-rich websites this effect will increase performance, which results in better SEO of your website.

Carousel
Documentation
- Download the reponsive lazy loader library.
- Place the folder inside the
libraries
folder so that jquery.responsivelazyloader.js and jquery.responsivelazyloader.min.js are found inlibraries/responsive-lazy-loader/js
- Download Fancyload
- Enable the module
- Clear the cache of your website
If you use drush
- Download the reponsive lazy loader library.
- Place the folder inside the
libraries
folder so that jquery.responsivelazyloader.js and jquery.responsivelazyloader.min.js are found inlibraries/responsive-lazy-loader/js
composer require drupal/fancyload
drush en fancyload -y
drush cr
If you use drupal console
- Download the reponsive lazy loader library.
- Place the folder inside the
libraries
folder so that jquery.responsivelazyloader.js and jquery.responsivelazyloader.min.js are found inlibraries/responsive-lazy-loader/js
composer require drupal/fancyload
drupal module:install fancyload
drupal cache:rebuild
How it works
The fancyload module works like an image style, but different. For each image a blank png file will be created and stored inside files/fancyload
and the main color gets stored using the drupal core key/value service.
- A lightweight blank png-file with the exact same size as the image loads.
- The main color of the image will be set as background.
- If the image appears inside the viewport, the real image gets loaded.
The use of transparent png-files with the exact same size was needed in order to work correctly with more advanced interface elements like Masonry, Owlcarousel, ... and in general for a pretty way of lazy loading the images.