README

这是一个围绕 malchata/yall.js 的 twig 扩展，用于懒加载 img、picture、video、iframe 等。

（也支持 source 标签和 srcset 属性）。

图像和视频的即时加载不仅使网页缓慢且笨拙，而且消耗大量带宽。

如果您使用 twig 模板系统作为视图层，则此扩展会延迟资源的加载，以便仅在视口中需要时才加载。

安装

composer require adhocore/twig-yall

用法

首先设置 twig 以注册此扩展

// 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>',
));

然后，在 twig 模板中，您可以使用 {% lazyload %} 块一次性懒加载整个块，或者使用 {{ lazify() }} 单独懒加载每个资源。

在两种情况下，您必须在页脚的某个位置调用 {{ yallify() }}。

懒加载

将 placeholder 配置设置为 'default.png'，以下模板

<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 #}

将呈现为

<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="...">

lazify

仅 src

<img {{ lazify("/my/img.jpg") }} />

将呈现为

<img class="lazy yall" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=" data-src="/my/img.jpg" />

有关 data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI= 的用法，请参阅 stackoverflow。

带有类

<img {{ lazify("logo.png", "cls1 cls2") }} />

将呈现为

<img class="cls1 cls2 lazy yall" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=" data-src="logo.png" />

自定义占位符

<img {{ lazify("logo.png", "cls1 cls2", "/img/placeholder.png") }} />

将呈现为

<img class="cls1 cls2 lazy yall" src="/img/placeholder.png" data-src="logo.png" />

视频海报

<video {{ lazify({poster: "video/poster.jpg"}, "video", "dummyposter.jpg") }}>

将呈现为

<video class="video lazy yall" poster="dummyposter.jpg" data-poster="video/poster.jpg">

source 标签

<source {{ lazify({srcset: "img2x.jpg 2x, img1x.jpg 1x"}) }}>

将呈现为

<source class="lazy yall" data-srcset="img2x.jpg 2x, img1x.jpg 1x">

src+srcset

<img {{ lazify(["src.jpg", "src2x.jpg 2x", "src1x.jpg 1x"], "", "dummy.jpg") }} />

将呈现为

<img class="lazy yall" src="dummy.jpg" data-src="src.jpg" data-srcset="src2x.jpg 2x, src1x.jpg 1x" />

yallify

重要：不要忘记在 twig 模板的页脚中放置 yall 加载器

{{ yallify() }}

默认情况下，它会加载 yall 3.1.7 与 polyfills。您可以设置 yall.js 版本，并关闭 polyfill，如下所示

{{ yallify("3.1.6", "") }} {# load yall v3.1.6 but not polyfill #}

您可以在第三个参数中传递 yall 选项。对于事件回调，请用 <raw></raw> 包裹

{{ yallify(null, null, {observeChanges: true, events: {load: "<raw>function(){}</raw>"}}) }}

将呈现为

<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({
      "observeChanges": true,
      "events": {
        "load": function(){}
      },
      "lazyClass": "lazy"
    });
  }, 99);
});
</script>

PS：此库不会验证发送到 lazify() 或 yallify() 的输入。

来自 malchata/yall.js

为您的图像使用合适的宽度和高度属性、样式和轻量级占位符。

贡献

请查看 指南

许可

© MIT | 2019, Jitendra Adhikari