Experimental project

This is a sandbox project, which contains experimental code for developer use only.

A lazy loader who gives the ability to load the best image style according to your HTML structure & mediaqueries.
This allows you to never upscale images in order to improve the loading time.
So you can use retina assets on retina devices, normal ones on desktop and small ones on phones.

The module is pre-setup with basic settings.

Features :

  1. A simple lazy loader.
  2. A custom lazy loader to load specific image style according to html structure.
  3. A custom lazy loader to load specific image style according to current media query.
  4. A custom lazy loader to load specific image style matching the html structure and the media query.
  5. Load image only when the image is on the active window.

Available Settings :

  1. Enable / disable the lazy loader.
  2. Set the distance between the image and the active window to trigger the image loading.
  3. Exclude some pages from the lazy loader.
  4. Configure the breakpoints (media queries)
  5. Configure the layouts.
  6. Advance features as javascript actions on image load or after all images load (as for custom analytics action).

Works with AJAX
The plugin already tested with views using ajax and views infinite scroll.

Use libraries
You have to use the libraries module to add the jquery lazyloader plugin. Download the plugin and copy the jquery.responsivelazyloader.js or jquery.responsivelazyloader.min.js in the /libraries/responsivelazyloader folder.

Requirement
You must allow image insecure derivatives to be able to use responsive lazy loader.
You have to edit your settings.php file, just add the following :
$conf['image_allow_insecure_derivatives'] = TRUE;
Reed more about image insecure derivatives.

Learn more
To learn more about responsivelazyloader look at the jQuery plugin or on Github.

Project information