Alex Schedrov
Back to blog
•
4 min read

Drupal Lazyload: deferred loading of images, blocks and content

Continuing the topic of lazy content loading, let’s review methods suitable for different types of information.

Lazy loading images

To load images when scrolling down the page, you can use the Lazyloader module.

Drupal Lazyload: deferred Loading of Images, Blocks and Content

It has simple settings:

  • Distance: distance to the visible area of the browser window in pixels. A value of 0 means the image loads only when it appears on the screen. For example, the value 100 loads the image 100 pixels before it appears on the screen.
  • Placeholder Image: the image displayed while the main image is loading. Other parameters are intuitive.

In module version 1.3, there may be an error saving the configuration form: Notice: Undefined variable: settings in the function lazyloader_admin_submit(), causing form values not to save. To fix this, remove the use of the function t() from the #value parameter in lines 79 and 80 of the file lazyloader.admin.inc, or apply the Lazyloader admin 1.3 Patch.

One drawback is that images added directly into node bodies load immediately. To solve this, you can use the solution provided on the module page, adding images with the following structure:

<div class="image-container">
  <img alt="Image" data-="" default="" files="" sites="" src="https://www.google.com.ua/images/srpr/logo3w.png">
</div>

It’s inconvenient to add images this way every time and difficult to explain to the client. Therefore, I wrote a module patch for myself that makes all images in node bodies dynamically loaded. It’s important that the node container has the class=node.

Code to add to lazyloader.module starting at line 122:

$attributes['class'] = array('loaded');

At line 183:

$lazyloader_init .= '<script type="text/javascript">
        jQuery(function($){
          $("div.node img::not(.lazyloader-icon):not(.loaded)").each(function() {
            $(this).attr("data-src", $(this).attr("src"))
                   .attr("src", "' . $image_placeholder . '").wrap("<div class="image-container"></div>")
                   .lazyloader({distance: ' . trim($settings['distance']) . ', icon: "' . $icon . '" });
          });
        });
      </script>';

I recommend applying the ready-made Lazyloader module 1.3 Patch. Similarly, this principle can be applied not only to node content. Important! The patch is relevant for version 1.3.

Lazy loading blocks

To use lazy loading for blocks, you can use the Blocklazyloader module, allowing dynamic loading of blocks.

The settings of this module are similar to the Lazyloader module, with the addition of the Block Content Class field. This parameter defines the main class of block content. For example, the content of all blocks in the Bartik theme has a div wrapper with the class content.

The same form submission problem described earlier may occur. To fix it, remove the use of the t() function in lines 87 and 88 of the file blocklazyloader.admin.inc.

Lazy loading nodes

A brief note on lazy loading nodes. There’s the Nodelazyloader module for this purpose. However, it only works with full node displays or teasers, since it relies on standard markup with classes and IDs. The settings for this module are similar to those described above. Honestly, for lazy loading nodes, it’s more convenient to use the Views Infinite Scroll module, discussed in one of my previous posts. It’s better integrated with Views and more flexible than Nodelazyloader.

Why is this necessary?

I believe this greatly helps highly loaded projects and heavy pages, where loading causes users to wait. Using these modules, we initially show users minimal information. If they want to see more content, it loads dynamically. It is also convenient for mobile internet, where traffic and bandwidth are limited.

Resources used: