Intersection Observer
142 sites
Security covered
This module uses the Intersection Observer API to lazy load blocks and Views when they become visible in the viewport within modern browsers. For older browsers, it gracefully falls back to using the Blazy library for lazy loading.
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/oncecompat 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:
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.