Intersection Observer

Provides a simple integration with Intersection Observer API to lazyload blocks
and Views for modern browsers. Their contents will be lazy loaded once visible
on the view port. Will degrade gracefully to use bLazy to lazy load AJAX blocks
and Views for old browsers. Just be sure, bLazy library is left enabled.

Requirements

• Blazy 3.0+ since IO 2.0+ for D9.4 to D11+.
• Blazy 2.16+ since IO 1.5+ to have core/once compat for D8 to D10+.
• IO Disconnect option being disabled.
• block.html.twig which preserves container attributes and expects {{ content }} variables.

Recommended

• Entity Browser
  To have Entity Browser with IO infinite pager via IO Browser sub-module, included
• Ajaxin
  To have modern loading animations integrated with Blazy images and IO AJAX.

Installation

Install the module as usual, more info can be found on:

Installing Drupal 8 Modules

Usage / Configuration

Enable this module and its dependency, core Views and Blazy modules.

Enabling Intersection Observer API

• Visit /admin/config/media/blazy
• Expand Extra Settings option.
• Fill out the fallback text for blocks under IO fallback.
• Check Disable IO block if you don't need lazy-loaded blocks. IO main feature will then be only IO Views infinite pager. Available since 1.6.

As a block observer

Only available if Disable IO block is NOT checked:

• Visit /admin/structure/block.
• Edit one of the blocks.
• Check Lazyload using Intersection Observer.

As a Views observer

• Visit /admin/structure/views.
• Edit one of the views.
• Enable Use AJAX option under Advanced > Other.
• Choose Intersection Observer under Pager.

Features

• IO Entity Browser, since 1.6.
• Lazyload ajaxified blocks on being intersected, optional since 1.6.
• Lazyload ajaxified views on being intersected.
• Supports static sites ala Tome for Views infinite pager since 1.2.

Known issues/ limitations

• Slick Carousel with asNavFor is not synced. Should be fine without, though.
• Only if any issue with IO Disconnect option, try disabling it. With a mix of Blazy images, IO block and pager observers, the IO must stand-by and be able to watch the next/ subsequent AJAX results. No expensive methods executed on being stand-by. Each item will be unobserved once loaded, instead.
• Only works with `block.html.twig` which has variables.content `{{ content }}` printed directly like regular blocks. If no such variable, AJAX loses it own trigger (the link).
• If you don't see the option Lazyload using Intersection Observer, it means it is internally excluded to declutter, for reasons: not worth to lazyload such as page title, or crucial content, etc. Or the region can be ajaxified entirely instead such as when using Ultimenu 2.x.