README

即将存档

🪦 由于所有长期使用的浏览器现在都支持 loading="lazy" 属性，因此将不会对此模块进行进一步的特性更新。

我们建议您卸载此模块，并在项目模板中将任何渐进式图片变量替换为标准的 Silverstripe 等效变量。

更多信息: https://caniuse.cn/loading-lazy-attr

特性

此模块使用 IntersectionObserver (v1) 进行渐进式图片加载。

浏览器对 IntersectionObserver 的支持（目前所有重要的浏览器）。

虽然此模块确实将 loading="lazy" 添加到 img 标签中，但此模块为不支持原生图像懒加载的浏览器提供了解决方案（简而言之，Safari）。

安装

安装此模块的唯一支持方法是使用 composer

composer require nswdpc/silverstripe-progressive-image

使用方法

直接在您的模板中调用缩略图渲染方法

<% with $Image %>
$ProgressiveFill(420,280,90)
<% end_with %>

代替

<% with $Image %>
$Fill(420,280)
<% end_with %>

要求

当调用 $Progressive* 中的任何一种方法时，将通过 Requirements API 自动添加要求，这些要求通过数据: uris 加载，并提供了 SRI 哈希值

模板

NSWDPC
  ProgressiveImage
    ProgressiveImage.ss -> template containing HTML loading the image
    Script.ss -> provides the JS to handle image replacement
    Style.ss -> provides CSS to assist with image replacement

工作原理

将创建一个宽度/高度为请求大小 10% 的缩略图，质量为 1。这将是加载的主要图像。

最终图像将使用请求的大小和质量创建（如 ProgressiveFill 示例中所示，420x280 @ 80% 质量）

当页面加载时，默认显示小而质量低的图像，一旦图像滚动或出现在视图中，由于 IntersectionObserver 的作用，较大的图像将开始加载。

注意

支持的缩略图方法

ProgressiveScaleWidth - 从 silverstripe/assets 的 ScaleWidth
ProgressiveFill - 从 silverstripe/assets 的 Fill（之前为 ProgressiveCroppedImage）
ProgressivePad - 从 silverstripe/assets 的 Pad
ProgressiveFillMax - 从 silverstripe/assets 的 FillMax
ProgressiveFocusFillMax - 从 jonom/focuspoint 的 FocusFillMax
ProgressiveFocusFill - 从 jonom/focuspoint 的 FocusFill

内联脚本和 CSS 移除

为了支持内容安全策略 (CSP)，已经移除了加载内联脚本和 CSS 的控制器扩展以及相关的模板。

感谢

一些灵感来源于: https://jmperezperez.com/medium-image-progressive-loading-placeholder/

许可证

BSD-3-Clause

维护者

dpcdigital@NSWDPC:~$

错误追踪器

我们欢迎在此项目的 Github Issue 追踪器上提交错误报告、pull requests 和特性请求。

在打开新问题之前，请先查看行为准则。

安全

如果您在此模块中发现安全漏洞，请首先通过电子邮件 digital[@]dpc.nsw.gov.au 联系我们，详细说明您的发现。

开发和贡献

如果您想为此模块做出贡献，请确保您提交一个拉取请求并与模块维护者进行讨论。

在完成拉取请求之前，请先查阅行为准则。

nswdpc / silverstripe-progressive-image

维护者

详细信息