Symf欧宝娱乐app下载地址ony UX计划．

它提供了两个关键特性:

• 一个刺激控制器加载惰性沉重的图像，有一个占位符
• 一个<一个href="https://blurha.sh" class="reference external" rel="external noopener noreferrer" target="_blank">BlurHash实现为图像创建data-uri缩略图

欧宝娱乐app下载地址在你的应用中配置Symfony UX．

然后使用Composer和Symfony Flex安装这个包:欧宝娱乐app下载地址

1 2 3 4 5 6 7 8 9

＄作曲家需要symfony/ux-l欧宝娱乐app下载地址azy-image不要忘记安装JavaScript依赖项并进行编译＄NPM install——force＄NPM运行监视#或用纱线＄纱线安装力＄纱看

还要确保您拥有至少3.0的版本<一个href="https://github.com/symfony/stimulus-bridge" class="reference external" rel="external noopener noreferrer" target="_blank">@欧宝娱乐app下载地址symfony / stimulus-bridge在你的package.json文件。

1 2 3 4 5 6 7 8 9 10

<imgsrc＝＂{{asset('image/small.png')}}＂{{stimulus_controller('s欧宝娱乐app下载地址ymfony/ux-lazy-image/lazy-image'， {src: asset('image/large.png')})}}{#可选，但避免图像加载时页面跳转#}宽度＝“200”高度＝“150”>

通过此设置，用户最初将看到图片/ small.png．然后，一旦页面加载完成，用户的浏览器下载了较大的图像src属性将更改为图像/ large.png．

也有支持srcset属性，通过传入srcset值给控制器:

12 3 4 5 6 7 8 9 10 11 12

<imgsrc＝＂{{asset('image/small.png')}}＂srcset＝＂{{asset('image/small.png')}}1 x,{{asset('image/small2x.png')}}2 x”{{stimulus_controller('s欧宝娱乐app下载地址ymfony/ux-lazy-image/lazy-image'， {src: asset('image/large.png')， srcset: {'1x': asset('image/large.png')， '2x': asset('image/large2x.png')}})}}/>

请注意

的stimulus_controller ()函数来自<一个href="https://github.com/symfony/webpack-encore-bundle" class="reference external" rel="external noopener noreferrer" target="_blank">WebpackEncoreBundle v1.10．

你可以使用BlurHash算法来创建一个轻的，模糊的，data-uri的图像缩略图，而不是使用生成的缩略图存在于你的文件系统中:

1 2 3 4 5 6 7 8 9 10

<imgsrc＝＂{{data_uri_thumbnail('public/image/large.png'， 100,75)}}＂{{stimulus_controller('s欧宝娱乐app下载地址ymfony/ux-lazy-image/lazy-image'， {src: asset('image/large.png')})}}{#使用BlurHash，大小是必需的#}宽度＝“200”高度＝“150”/>

的data_uri_thumbnail函数接收3个参数:

• 用于生成data-uri缩略图的图像的服务器路径;
• 要生成的BlurHash的宽度
• 要生成的BlurHash的高度

您应该尝试生成小的BlurHash图像，因为生成图像可能是cpu密集型的。相反，您可以通过生成一个小图像并使用宽度和高度HTML属性来放大图像。

12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

/ / mylazyimage_controller.js进口{控制器}从“@hotwired /刺激”；出口默认的类扩展控制器{connect() {这.element.addEventListener (“lazy-image:连接”，这._onConnect);这.element.addEventListener (“lazy-image:准备好了”，这._onReady);} disconnect() {//当控制器断开连接时，应该总是删除监听器以避免副作用这.element.removeEventListener (“lazy-image:连接”，这._onConnect);这.element.removeEventListener (“lazy-image:准备好了”，这._onReady);} _onConnect(事件){// lazy-image行为刚刚开始} _onReady(事件){//高清版本刚刚加载}}

然后在模板中，将控制器添加到HTML属性中:

12 3 4 5 6 7 8 9 10 11 12 13

<imgsrc＝＂{{data_uri_thumbnail('public/image/large.png'， 100,75)}}＂{{stimulus_controller({mylazyimage: {}， 'sy欧宝娱乐app下载地址mfony/ux-lazy-image/lazy-image': {src: asset('image/large.png')}})}}{#使用BlurHash，大小是必需的#}宽度＝“200”高度＝“150”/>

---

请注意:请谨慎添加控制器之前，以便它在之前执行，并且可以侦听lazy-image:连接正常事件。