README

!!! 由于浏览器中图像的通用 "loading='lazy'" 功能，此包已过时。请直接使用 Sitegeist.Kaleidoscope!!!

Neos 的响应式图像 - 考虑到 Atomic.Fusion & Monocle

此包实现了来自 Sitegeist.Kaleidoscope 包的响应式图像的懒加载。

这是通过将 src、srcset 和 sizes 属性渲染为 data-src、data-srcset 和 data-sizes 来实现的。然后使用具有 lazyload 类的 img 或 pPicture 标签进行标记，以便在图像进入视图时通过 js 替换。如果您喜欢，可以渲染一个非常低分辨率的 src 属性，或者留空 src 属性（默认）。

作者 & 赞助商

• Martin Ficzel - ficzel@sitegeist.de

本包的开发和公共发布得到了我们的雇主 http://www.sitegeist.de 的慷慨赞助。

安装

Sitegeist.Lazybones 可通过 packagist 获得，运行 composer require sitegeist/lazybones。我们使用语义版本控制，因此每次重大更改都会增加主版本号。

设置

默认的懒加载由设置 'Sitegeist.Lazybones.default.lazyEnabled' 控制，默认启用，除非在 FLOW_CONTEXT=Development/VisualRegressionTesting。

Sitegeist:
  Lazybones:
    default:
      lazyEnabled: true

使用

LazyloadJS

要启用懒加载，您需要集成一个脚本，该脚本将检测 lazyload 类，并在它们进入视图时将 data-src、data-srcset 和 data-sizes 转换为正确的属性。

此包包含来自 https://github.com/aFarkas/lazysizes 的 lazysizes 库，但可能最好将 js 包含到您的自己的 fe-build 中。

要包含捆绑的 js，您可以使用以下片段

lazyloadJS = Neos.Fusion:Tag {
    tagName = 'script'
    attributes.async = true
    attributes.src = Neos.Fusion:ResourceUri {
        path = 'resource://Sitegeist.Lazybones/Public/JavaScript/lazysizes.min.js'
    }
}

Sitegeist.Lazybones:Image

渲染带有可选 srcset 的 img 标签，基于 sizes 或分辨率。

此原型是 Sitegeist.Kaleidoscope:Image 的直接替换，具有可选的 props 以控制懒加载。

参见：https://github.com/sitegeist/Sitegeist.Kaleidoscope#sitegeistkaleidoscopeimage

属性

• lazy：启用懒加载（布尔值，默认为Sitegeist.Lazybones:Lazy.Enabled）
• lazyClass：附加到img标签的类（字符串，默认为Sitegeist.Lazybones:Lazy.ClassName）
• lazyWidth：首先加载的缩略图src的宽度（字符串，默认为Sitegeist.Lazybones:Lazy.Width）

来自Sitegeist.Kaleidoscope:Image的属性

• imageSource：要渲染的imageSource
• srcset：默认图像的媒体描述符，如'1.5x'或'600w'（字符串或数组）
• sizes：默认图像的sizes属性（字符串或数组）
• format：（可选）图像格式，如webp或png，将应用于imageSource
• width：（可选）基本宽度，将应用于imageSource
• height：（可选）基本高度，将应用于imageSource
• alt：img标签的alt属性
• title：img标签的title属性
• class：img标签的class属性
• renderDimensionAttributes：当从imageSource获取数据时，渲染宽度和高度属性（布尔值）

Sitegeist.Lazybones:Picture

渲染一个具有各种源的资源标签。

此原型是Sitegeist.Kaleidoscope:Picture的替换，具有可选属性来控制懒加载。

参见：https://github.com/sitegeist/Sitegeist.Kaleidoscope#sitegeistkaleidoscopepicture

属性

• lazy：启用懒加载（布尔值，默认为Sitegeist.Lazybones:Lazy.Enabled）
• lazyClass：附加到img标签的类（字符串，默认为Sitegeist.Lazybones:Lazy.ClassName）
• lazyWidth：首先加载的缩略图src的宽度（字符串，默认为Sitegeist.Lazybones:Lazy.Width）

来自Sitegeist.Kaleidoscope:Picture的属性

• imageSource：要渲染的imageSource
• sources：一个支持以下键的源定义数组
  • media：此源的媒体查询
  • type：此源的类型
  • imageSource：用于艺术指导的备用图像源
  • srcset：媒体描述符，如'1.5x'或'600w'（字符串或数组）
  • sizes：sizes属性（字符串或数组）
  • width：（可选）基本宽度，将应用于imageSource
  • height：（可选）基本高度，将应用于imageSource
  • format：（可选）源图像的格式，如webp或png，应用于imageSource和type
• srcset：默认图像的媒体描述符，如'1.5x'或'600w'（字符串或数组）
• sizes：默认图像的sizes属性（字符串或数组）
• formats：（可选）将作为不同类型的源渲染的图像格式（字符串或数组）
• width：（可选）基本宽度，将应用于imageSource
• height：（可选）基本高度，将应用于imageSource
• alt：picture标签的alt属性
• title：picture标签的title属性
• class：picture标签的class属性
• renderDimensionAttributes：当从imageSource获取数据时，为img标签渲染维度属性（宽度和高度）

Sitegeist.Lazybones:Source

根据大小或分辨率渲染一个带有可选srcset的源标签。

此原型是Sitegeist.Kaleidoscope:Source的替换，具有可选属性来控制懒加载。

属性

• lazy：启用懒加载（布尔值，默认为Sitegeist.Lazybones:Lazy.Enabled）

来自Sitegeist.Kaleidoscope:Source的属性

• imageSource：要渲染的imageSource
• srcset：默认图像的媒体描述符，如'1.5x'或'600w'（字符串或数组）
• sizes：默认图像的sizes属性（字符串或数组）
• media：此源的媒体查询
• type：此源的类型
• width：（可选）基本宽度，将应用于imageSource
• height：（可选）基本高度，将应用于imageSource
• format：源图像的格式，如webp或png，应用于imageSource和type

Sitegeist.Lazybones:Lazy.Enabled

布尔值原型，默认值为true，定义是否启用懒加载。全局或针对您的融合的特定部分覆盖此原型的value。

注意：默认值来自配置'Sitegeist.Lazybones.default.lazyEnabled'，默认情况下处于活动状态，除非在FLOW_CONTEXT=Development/VisualRegressionTesting中。

Sitegeist.Lazybones:Lazy.ClassName

字符串值原型，默认值为lazyload，用于定义标记懒加载图像的类。全局或针对您的融合的特定部分覆盖此原型的value。

Sitegeist.Lazybones:Lazy.Width

具有默认值 null 的整数值原型，用于定义加载为占位符的低分辨率图像的大小。全局或针对您的融合的特定部分覆盖此原型的 value。

动态启用/禁用懒加载渲染

为了优化初始加载时间，对于第一部分内容应禁用懒加载，而对于其他部分应启用。这可以通过根据当前 node 是否是主集合中的第一个内容来启用 ContentCase 原型的 lazy 来实现。

content = Neos.Neos:ContentCollection {
    nodePath = 'main'
    content.iterationName = 'mainContentIterator'

    // enable lazynes for all but first content 
    prototype(Sitegeist.Lazybones:Lazy.Enabled) {
        value = ${!mainContentIterator.isFirst}
    }
}

贡献

我们非常乐意接受贡献。请向我们发送拉取请求。