Paragrafen
Fancyload demo

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.

Fashion

Carousel

Documentation

  1. Download the reponsive lazy loader library.
  2. Place the folder inside the libraries folder so that jquery.responsivelazyloader.js and jquery.responsivelazyloader.min.js are found in libraries/responsive-lazy-loader/js
  3. Download Fancyload
  4. Enable the module
  5. Clear the cache of your website

If you use drush

  1. Download the reponsive lazy loader library.
  2. Place the folder inside the libraries folder so that jquery.responsivelazyloader.js and jquery.responsivelazyloader.min.js are found in libraries/responsive-lazy-loader/js
  3. drush dl fancyload -y
  4. drush en fancyload -y
  5. drush cr

If you use drupal console

  1. Download the reponsive lazy loader library.
  2. Place the folder inside the libraries folder so that jquery.responsivelazyloader.js and jquery.responsivelazyloader.min.js are found in libraries/responsive-lazy-loader/js
  3. drupal module:download fancyload
  4. drupal module:install fancyload
  5. 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.

  1. A lightweight blank png-file with the exact same size as the image loads.
  2. The main color of the image will be set as background.
  3. 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.