搜索derhaeuptling / contao-lazy-images
Lazy Images延迟Contao开源CMS长网页中图像的加载。
Requires
- php: >=5.4.0
- contao-community-alliance/composer-plugin: ~2.4 || ~3.0
- contao/core-bundle: ~4.4.0 || <4.8
README
已弃用
此插件旨在完成两件事
- 延迟加载图像
- 当图像尺寸可用时防止浏览器重排
这两者现在都由原生的浏览器支持……至少目前是这样。
-
原生延迟加载
加载属性
<img loading="lazy">将原生延迟加载引入浏览器。
截至撰写本文时，它由Google Chrome和Microsoft Edge支持。
更多信息
caniuse.com
Firefox计划在v75中实现
Safari也在努力实现 -
原生图像占位符
具有和高度属性的图像仍然可以完美地将占位符绘制到图像将被加载的位置。
但是，当我们给图像添加响应式CSS时，如添加style="width: 100%; height: auto;"，浏览器无法绘制占位符。但是，与此同时，从Firefox开始，浏览器现在利用宽度和高度图像属性来计算一个宽高比。利用这个宽高比，现代浏览器现在可以绘制占位符。
(实际上这与此插件所做的是一样的，以及内禀比率技巧在2009年所做的是一样的。)
感谢您使用此插件！
contao-lazy-images
Contao插件，用于使用LazySizes.js进行图像延迟加载，而无需在图像加载时打扰网站的重排。
延迟加载图像提高了网站性能。图像不再阻止window.onload事件。
视口中的可见图像首先加载，因此加载更快。
为了防止图像加载时网站重排，可配置的占位符保护了图像将占据的位置。
在通用的contao设置中提供了一些选项
- 透明占位符
内联了一个具有正确宽高比的微小透明data:image占位符。 - 缩略图占位符
内联了一个具有正确宽高比的缩略图data:image占位符。 - 内禀比率（不需要占位符）
创建了一个内禀比率容器以保留加载图像的正确尺寸。
这是最快且最正确的方法。由于内禀比率依赖于CSS，它可能与您的主题冲突。 - 内禀比率+缩略图占位符
可以调整占位符和缩略图的大小。
提示：自3.0.0版本起，支持使用其源的视频语法，但仅适用于缩略图，不适用于内禀比率。
为什么要防止重排
虽然重排很丑陋且消耗计算能力，但它还会导致与JavaScript布局解决方案的问题。
JavaScript 库如 Masonry 或 GreenSock 分别处理元素的定位/布局以及它们的尺寸。
如果之后有任何东西改变了这些尺寸，比如一个被（懒加载的）图片，计算出的布局就会中断。
使用内联占位符可以提前防止这些问题。
LazySizes
LazySizes 是一个高性能且对 SEO 友好的图像（响应式和非响应式）、iframe 等懒加载器，它可以检测通过用户交互、CSS 或 JavaScript 触发的任何可见性变化，无需配置。