README

此模块可提高您contao环境的性能。

改进

懒加载屏幕外图片

屏幕外图片是指页面折叠部分下的图片。由于用户在加载页面时无法看到屏幕外的图片，因此没有必要将屏幕外的图片作为初始页面加载的一部分下载。换句话说，延迟加载屏幕外的图片可以加快页面加载时间和交互时间。

我们附带调整后的picture_lazyload.html5，以便为图片提供适当的懒加载设置（如果启用tl_layout.scripts中的脚本js_lazyload，则将用picture_lazyload.html5替换picture_default.html5）。如果您使用自定义的picture-*.html5模板，则调整如下：

如何使用？

要启用懒加载，请启用页面布局中的js_lazyload JavaScript-模板。

<img data-src="/your/image1.jpg"
    data-srcset="/your/image1.jpg 200w, /your/image1@2x.jpg 400w"
    sizes="(min-width: 20em) 35vw, 100vw">

<picture>
    <source media="(min-width: 1024px)" data-srcset="/your/image1a.jpg" />
    <source media="(min-width: 500px)" data-srcset="/your/image1b.jpg" />
    <img alt="Stivaletti" data-src="/your/image1.jpg">
</picture>

背景图片我们还支持背景图片的懒加载。要利用此功能，请将css类lazy添加到背景图片容器中，并在data-src属性中提供图片路径。

<div class="lazy" data-src="../img/44721746JJ_15_a.jpg"></div>

在滑块中懒加载，如slick滑块

为了防止克隆轮播图幻灯片图片的弹跳（使用无限循环），应将lazyLoad技术设置为progressive而不是on-demand。

防止懒加载

如果您想防止您的图片被懒加载，您必须调整您的模板并在图片模板数据中添加['lazyload' => false]。

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>

  <figure class="image_container"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?> itemscope itemtype="http://schema.org/ImageObject">

    <?php if ($this->href): ?>
      <a href="<?= $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?> itemprop="contentUrl">
    <?php endif; ?>

    <?php $this->insert('picture_default', array_merge(['lazyload' => false] ,$this->picture)); ?>

    <?php if ($this->href): ?>
      </a>
    <?php endif; ?>

    <?php if ($this->caption): ?>
      <figcaption class="caption" itemprop="caption"><?= $this->caption ?></figcaption>
    <?php endif; ?>

  </figure>

<?php $this->endblock(); ?>

示例：ce_image.html5

如果您使用heimrichhannot/contao-utils-bundle的TwigExtension image，只需将'lazyload': false添加到您的项目数据中。

{{ singleSRC|image([0,0,3],{'href' : url, 'lazyload': false})|raw }}

按需更新懒加载

如果您需要按需更新您的懒加载实例，例如使用barba.js PJAX页面转换插件，请使用window.lazyLoad.update()函数。

回调

为了在图片加载后进行如触发动画等调整，您可以在图片上监听一些回调

😋技巧与技巧

不要使用占位符图片

摘自verlok/lazyload的github README.md

我们不建议在您的HTML中使用占位符图片（如透明的像素GIF）。

为了获得最佳感知性能，请将src和srcset属性留空。这样做，图片将在LazyLoad开始加载图片时显示。请参阅此视频或[此笔](https://> codepen.io/verlok/pen/bKYggE?editors=0110)以测试差异（请记住禁用缓存并设置较慢的连接速度，如果您有非常快的连接速度）。

如果您在src中放入任何东西（如透明的GIF），则LazyLoad会开始加载图片，但浏览器不会显示新图片，直到新图片加载，从而导致感知性能更差。

即使在静态代码分析器无法验证HTML的情况下，也不需要在src或srcset属性中放入任何值。原因是一旦JavaScript执行，这些值将由LazyLoad设置。对于SEO，如果客户端是像Googlebot这样的爬虫，它将被LazyLoad检测到，并修复HTML。

heimrichhannot / contao-speed-bundle

维护者

详细信息