Lazy load images and videos in twig

Eager loading of images and videos not only makes webpage slow and clumsy but also consumes a lot of bandwidth.
If you use twig templating system for your view layer, here's a small extension that defers loading of resources so they are loaded when required in viewport.

This extension based on awesome malchata/yall.js aka yet another lazy loader is fully customisable.

Install

composer require adhocore/twig-yall

Usage

First setup twig to register this extension:

// Use your loader of choice
$twig = new Twig\Environment(new Twig\Loader\ArrayLoader);

// Register Yall with defaults
$twig->addExtension(new Ahc\TwigYall\Yall([
    // customisation config:
    'placeholder' => 'default.png',
]));

Then wrap your twig template in {% lazyload %}...{% endlazyload %} like so:

{# sometemplate.twig #}

<img src="apple.jpg" />                   {# not lazyloaded #}

{% lazyload %}
<img src="ball.jpg" />                    {# lazyloaded #}
<img src="cat.jpg" class="no-lazy" />     {# not lazyloaded #}
<img src="cat.jpg" data-src="..." />      {# not lazyloaded #}
<video poster="vid.jpg">                  {# lazyloaded #}
  <source src="vid1.mp4">                 {# lazyloaded #}
  <source src="vid2.mp4">                 {# lazyloaded #}
</video>
<video class='no-lazy' src="..."></video> {# not lazyloaded #}
<picture><source src="pic.jpg"></picture> {# lazyloaded #}
{% endlazyload %}

<img src="...">                           {# not lazyloaded #}

{{ yallify() }}                           {# place it in footer #}

Finally when twig compiles to html, above will be rendered as:

<img src="apple.jpg" />
<img class="lazy yall" src="default.png" data-src="ball.jpg" />
<img src="cat.jpg" class="no-lazy" />
<img src="cat.jpg" data-src="..." />
<video class="lazy yall" poster="default.png" data-poster="vid.jpg">
  <source class="lazy yall" data-src="vid1.mp4">
  <source class="lazy yall" data-src="vid2.mp4">
</video>
<video class='no-lazy' src="..."></video>
<picture><source class="lazy yall" data-src="pic.jpg"></picture>
<img src="...">

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver" async></script>
<script src="https://unpkg.com/yall-js@3.1.7/dist/yall.min.js" async></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
  window.setTimeout(function () { yall({"lazyClass":"lazy"}); }, 99);
});
</script>

adhocore / twig-yall

Resource lazy loader extension for twig using malchata/yall.js

adhocore/twig-yall

It is a twig extension around malchata/yall.js for lazy loading img, picture, video, iframe etc.

(Also supports source tag and srcset attribute).

Installation

composer require adhocore/twig-yall

Usage

First setup twig to register this extension:

// Use your loader of choice
$twig = new Twig\Environment(new Twig\Loader\ArrayLoader);
// Register Yall with defaults
$twig->addExtension(new Ahc\TwigYall\Yall);
// Configuring Yall instance:
$twig->addExtension(new Ahc\TwigYall\Yall(
    'polyfillJs'  => '<custom url to polyfill>',
    'yallJs'      => '<custom url to yall.js>',
    'lazyClass'   => '<default lazy class>',
    'placeholder' => '<default placeholder image url>',
));

Voila, then in twig templates you would either use {% lazyload %} block to lazyload whole block at once OR individually lazyload each resources with {{ lazify() }}.

…

View on GitHub