README

LazyFox for Craft CMS 3.x

一个简单易用的插件，可以让图片的懒加载变得轻松简单。图标归功于Noun Project上的ester barbato的Fox。

关键特性

懒加载图片，使网页更加响应和流畅
source-sets：LazyFox会生成你图片的多个不同尺寸，并让浏览器仅加载所需尺寸的图片，避免加载比视口可以渲染的更大的图片，从而加快加载速度
在图片加载时显示嵌入到HTML代码中的占位符
易于使用的Craft和Twig原生API
使用最新的HTML5和JS API，如MutationObserver、ResizeObserver和Intersection API。包含polyfills。
轻量级：7kB JavaScript，<1kB CSS
noscript回退
Imager支持。当可用时使用Imager进行缩放。

有了LazyFox，文档跳跃已成为过去式！

要求

此插件需要Craft CMS 3.0.0-beta.23或更高版本。

安装

虽然建议从Craft插件商店安装LazyFox，但如果您愿意，可以按照以下说明手动安装。

打开您的终端并转到您的Craft项目
```
 cd /path/to/project
```

然后让Composer加载插件

 composer require janhuenermann/lazyfox

在控制面板中，转到设置→插件，并为lazyfox点击“安装”按钮。

使用lazyfox

要使图片懒加载，只需在Twig中使用image函数。

image(asset)

创建一个启用懒加载的图片标签。

参数

asset：一个craft\elements\Asset实例

示例:

<div class=my-images>
{% for myImage in entry.myImageField %}
{{ image(myImage) }}
{% endfor %}
</div>

注意：请确保如果缓存结果，仍然包括LazyFox所需的资产（JavaScript & CSS）。您可以在Twig中使用{% do view.registerAssetBundle('janhuenermann\lazyfox\assetbundles\Lazyfox\LazyfoxAsset') %}来做到这一点。

配置lazyfox

在设置页面上，您可以选择不同的懒加载样式，并设置源集（srcset属性）中包含的图片尺寸。

代码输出

LazyFox加载图片后，生成的HTML结构将类似于以下内容。

<picture class="lazyfox --no-progress --transition --pixelated">
    <img 
    	sizes="480px" 
    	srcset="/images/_900x800_crop_center-center_none/a.jpg 900w, /images/_1800x1600_crop_center-center_none/a.jpg 1800w" 
    	src="/images/_1800x1600_crop_center-center_none/a.jpg">
</picture>

如您所见，它生成了一个HTML5 picture元素。在这种情况下，img的sizes属性由LazyFox自动设置，以便加载最佳匹配的图片。

在CSS中设置懒加载图片的样式

由于生成的代码与普通的img标签略有不同，因此有时很难以期望的方式设置图片样式。但是，使用LazyFox则非常简单。只需针对picture标签内的图片进行任何基于img的属性操作，如object-fit、object-position等。如果您想调整大小或与元素边框框有关的内容，只需针对picture元素本身即可。

默认情况下，LazyFox将picture标签宽度设置为100%。但这很容易改变。请注意，建议使用百分比以确保在不同设备上保证响应性。

如何创建一个不拉伸的懒加载正方形图片的基本示例

main .lazyfox {
	width: 300px;
	height: 300px;
}

main .lazyfox img {
	object-fit: cover;
}

插件由Jan Hünermann开发。

图标授权：由ester barbato提供的Noun Project中的Fox图标

janhuenermann / lazyfox

维护者

详细信息