lekoala/silverstripe-lazysizes

此包已被废弃且不再维护。未建议替换包。

在 SilverStripe CMS 中添加 lazysizes

维护者

详细信息

github.com/lekoala/silverstripe-lazysizes

源代码

问题

安装: 133

依赖: 0

建议者: 0

安全: 0

星标: 16

关注者: 5

分支: 6

开放问题: 0

类型：silverstripe-module

dev-master 2021-09-02 12:52 UTC

Requires

MIT de046f4a3dee65db3c012a3ca6f41bb0fba49395

  • LeKoala <thomas.woop@lekoala.be>

modulecmssilverstripelazysizes

This package is auto-updated.

Last update: 2022-07-30 14:43:01 UTC

README

将 https://github.com/aFarkas/lazysizes 和 https://github.com/aFarkas/respimage 集成到 Silverstripe。

代码主要受到 https://github.com/heyday/silverstripe-responsive-images 的启发

一站式解决方案

  • 懒加载图片
  • 响应式图片
  • 占位符图片（使用 placehold.it）

如果浏览器不支持原生语法，则只加载 Respimages。

插件

此模块已将预构建的插件整合到一个js文件中。

默认可用的插件有

Lasysizes

  • unveilhooks
  • print
  • bgset
  • include

Respimages

  • oldie
  • intrinsic
  • mutation

您也可以通过调整以下路径来自定义库的路径

LazySizesImageExtension:
	js_path: 'lazysizes/javascript'

懒加载

如果您只想懒加载图片，可以使用三种默认方法，这些方法不指定额外的尺寸。

示例

$Image.Lazy(720x250)
$Image.LazyCrop(720x250)
$Image.LazyCropFocus(720x250)

响应式集

您可以定义自己的响应式集。您可以查看包含在 ResponsiveDefault 集合中的配置，该集合设置了 4 个断点。您可以定义自己的集合，更改尺寸、方法和默认尺寸。

所有集合默认使用 lazysizes data-sizes="auto"，这意味着使用父元素的宽度来确定需要加载的尺寸。

也支持视网膜屏。

配置示例

LazySizesImageExtension:
	ResponsiveDefault:
		sizes: [320x213 320w,640x426 640w,960x639 960w,1280x852 1280w]
	ResponsiveDefaultSquare:
		sizes: [320x320 320w,640x640 640w,960x960 960w,1280x1280 1280w]
	ResponsiveDefaultRetina:
		sizes: [400x300 1x, 800x600 2x]

在模板中使用示例

$Image.ResponsiveDefault

使用占位符

控制器扩展提供了一个辅助方法，可以轻松地使用 PlaceholdIt 创建占位符。您可以定义基本尺寸和 src 集合。

示例

$PlaceholdIt(175x75,'200x100,500x300,800x400')

SrcSet

有时，您只需输出一系列 srcset 路径（例如，定义 bgset）。集合的最后一个元素永远不会调整大小（始终使用最大尺寸的原生图片）。您可以通过将第二个参数设置为 false 来防止这种情况发生。

示例

<body id="$ClassName" class="typography lazyload" data-bgset="$SiteConfig.RandomBackgroundImage.SrcSet('480,800')">

兼容性

测试了 3.1 版本

安装

composer require lekoala/silverstripe-lazysizes

维护者

LeKoala - thomas@lekoala.be