【SEO工具】lazysizes

Lazysizes

lazysizes 是一个快速（无卡顿）、SEO 友好且自初始化的 lazyloader，用于图像（包括响应式图像 /）、iframe、脚本/小部件等等。它还通过区分关键的视图和近视图元素来确定资源的优先级，从而更快地提高感知性能

它也可能成为您集成响应式图像的头号工具。它可以自动计算响应式图像的属性，它允许您与 CSS 共享属性的媒体查询，有助于将布局 （CSS） 与内容/结构 （HTML） 分开，并使将响应式图像集成到任何环境中变得非常简单。它还包括一组可选插件，以进一步扩展其功能。

怎么使用Lazysizes

下载 lazysizes.min.js 脚本并在网页中包含 lazysize。（或通过 npm： 或 bower 安装npm install lazysizes --savebower install lazysizes --save)

<script src="lazysizes.min.js" async=""></script>

或者

import 'lazysizes';
// import a plugin
import 'lazysizes/plugins/parent-fit/ls.parent-fit';

// Note: Never import/require the *.min.js files from the npm package.

lazysizes 不需要任何 JS 配置：将 与 and/or 属性一起添加到您的图像/iframe。或者，您还可以添加具有低质量图像的属性：class "lazyload" data-src data-src setsrc

<!-- non-responsive: -->
<img data-src="image.jpg" class="lazyload" />

<!-- responsive example with automatic sizes calculation: -->
<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
    image2.jpg 600w,
    image3.jpg 900w" class="lazyload" />

<!-- iframe example -->
<iframe frameborder="0"
   class="lazyload"
   allowfullscreen=""
   data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

响应式图像支持（图片和/或 srcset）

Lazysizes 基于响应式图像标准构建，并通过附加功能对其进行扩展。要获得完整的跨浏览器响应式图像支持，您必须使用完全 polyfill（如 picturefill），或者使用极轻量级的 partial respimg polyfill 插件或响应式图像点播插件。或者，您可以简单地通过该属性定义回退 src。

是什么让Lazysizes如此出色：

lazysizes 与其他Lazysizes图像加载器不同。

1. 自动检测任何 Web 环境中当前和未来 lazyload 元素的任何可见性更改：该脚本作为一个通用的、自初始化、自配置和自销毁的组件，并自动检测任何当前和未来图像/iframe元素的可见性的任何变化，无论它是否通过用户滚动、通过或通过任何类型的 JS 行为触发的 CSS 动画（轮播、滑块、无限滚动、砌体、同位素/过滤/排序、AJAX、SPA 等）。它还可以自动与任何类型的JS-/CSS-/Frontend-Framework（jQuery mobile、Bootstrap、Backbone、Angular、React、Ember）结合使用。
2. 面向未来：它直接包括标准响应式图像支持（和picture srcset)
3. 关注点分离：对于响应式图像支持，它添加了自动计算以及媒体查询功能的别名。如果您使用 CSS 添加可滚动容器（溢出：auto）或创建包含图像的大型菜单，则也不需要更改 JS。
4. 性能：它基于高效的最佳实践代码（运行时和网络），以 60fps 的速度无卡顿地工作，并且可以在 CSS 和 JS 繁重的页面或 Web 应用程序上与数百个图像/iframe 一起使用。
5. 可扩展：它提供了 JS 和 CSS 钩子，以通过任何类型的延迟加载、延迟实例化、视图回调或效果来扩展 lazysize。
6. 智能预取/智能资源优先级：在视图资产附近延迟预取/预加载以改善用户体验，但仅在浏览器网络空闲时。这样一来，视图中的元素加载速度更快，并且视图附近的图像在进入视图之前会延迟预加载。
7. 轻量级但成熟的解决方案：lazysizes 在轻量级和快速、可靠的解决方案之间取得了适当的平衡
8. SEO 改进：lazysizes 不会向 Google 隐藏图像/资产。无论您使用哪种标记模式。Google 不会滚动您的网站/与您的网站互动。Lazysizes 检测用户代理是否能够滚动，如果不能，则立即显示所有图像。

有关 API 的更多信息

lazysizes 带有一个简单的标记和 JS API。通常，您只需要使用标记 API。

标记 API

将 添加到所有 和 元素，这些元素应该延迟加载。使用 or 属性代替 or 属性：class lazyload img iframe src srcset data-src data-srcset

<img data-src="image.jpg" class="lazyload" />
<!-- retina optimized image: -->
<img data-srcset="responsive-image1.jpg 1x, responsive-image2.jpg 2x" class="lazyload" />

自动设置属性sizes

lazysizes 支持自动设置属性，对应于图像的当前大小 - 只需将 size的值设置为 sdata-size sauto。

<img
	data-sizes="auto"
	data-srcset="responsive-image1.jpg 300w,
	    responsive-image2.jpg 600w,
	    responsive-image3.jpg 900w"
    class="lazyload" />

重要提示：尺寸的计算方式：自动尺寸计算会使用图片的显示宽度。这意味着图像的宽度必须至少在加载图像本身之前大致可计算（这意味着您不能使用 ）。通常，以下常规 CSS 规则可能会有所帮助：。如果它低于 （可以通过选项进行配置），lazysizes 将遍历 DOM 树，直到找到结束的父项并使用此数字。

lazysizes 自动计算的宽度可以使用事件进行修改，或者父适合插件可用于调整图像大小以适合父/容器，并且是在将图像拟合到其容器时需要考虑图像高度时的唯一解决方案（这也包括使用 ）。

仅当您使用带有宽度描述符的属性时，该功能才有意义，该属性允许选择最合适的图像（如果使用 x 描述符或仅使用 .，则没有意义）

推荐/可能的标记模式

Lazysizes 允许您编写无穷无尽的各种不同的标记模式。找到您自己/最佳模式或选择以下选项之一。

简单图案

添加类，只需省略属性或添加数据 uri 作为回退。

<!--  responsive adaptive example -->

<img
	class="lazyload"
	data-srcset="image.jpg 1x, image2.jpg 2x"
    alt="my image" />
<!--  retina optimized example -->
<img class="lazyload"
	data-srcset="progressive-image.jpg 1x, progressive-image2.jpg 2x"
    alt="my image" />

<!-- or non-responsive: -->
<img
	data-src="image.jpg"
	class="lazyload" />

注意：如果您使用的是 / 或 ，我们建议使用 a（参见下一个模式：“组合”）或合适的属性来扩展此模式。

结合使用data-srcsetdata-src

如果您想使用响应式图像来支持浏览器，但又不想包含 polyfill，只需将 your 与属性组合即可。

<!-- responsive example: -->
<img
	data-sizes="auto"
    data-src="image3.jpg"
	data-srcset="image3.jpg 600w,
	    image1.jpg 220w,
	    image2.jpg 300w,
	    image3.jpg 600w,
	    image4.jpg 900w"
	class="lazyload" />

注意：由于“稍后阅读”应用程序和其他工具（例如固定按钮）也会拾取，因此如果您使用 polyfill，此模式也很有意义。如果您不使用 polyfill，建议第一个候选图像与 fallback 匹配。

LQIP/模糊图像占位符/模糊图像技术

如果您使用的是 LQIP（低质量图像占位符）模式，只需添加低质量图像作为：

<!-- responsive example: -->
<img
	data-sizes="auto"
    src="lqip-src.jpg"
	data-srcset="lqip-src.jpg 220w,
    image2.jpg 300w,
    image3.jpg 600w,
    image4.jpg 900w" class="lazyload" />

<!-- or non-responsive: -->
<img src="lqip-src.jpg" data-src="image.jpg" class="lazyload" />

LQIP 技术可以通过将其与 CSS 过渡/动画相结合来增强 LQIP 图像的锐化/去模糊或过度淡入淡出。

<style>
	.blur-up {
		-webkit-filter: blur(5px);
		filter: blur(5px);
		transition: filter 400ms, -webkit-filter 400ms;
	}

	.blur-up.lazyloaded {
		-webkit-filter: blur(0);
		filter: blur(0);
	}
</style>

<img src="lqip-src.jpg" data-src="image.jpg" class="lazyload blur-up" />

<!-- ... -->

<style>
	.fade-box .lazyload,
	 .fade-box .lazyloading {
		opacity: 0;
		transition: opacity 400ms;
	}

	.fade-box img.lazyloaded {
		opacity: 1;
	}
</style>

<div class="ratio-box fade-box">
	<img src="lqip-src.jpg" />
	<img data-src="image.jpg" class="lazyload" />
</div>

现代透明图案srcset

将普通属性与透明或低质量图像组合为值和属性。这样一来，现代浏览器将在不加载属性的情况下延迟加载，而所有其他浏览器将简单地回退到初始属性（没有延迟加载）。（这个漂亮的图案起源于@ivopetkov。）

<img
    src="image3.jpg"
    srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
	data-srcset="image3.jpg 600w,
		image1.jpg 220w,
	    image2.jpg 300w,
	    image4.jpg 900w"
	data-sizes="auto"
	class="lazyload" />

noscript 模式

如果禁用 JavaScript 是一个问题，您可以将这个简单的模式与元素中的图像相结合。

<style>
	.no-js img.lazyload {
    	display: none;
    }
</style>

<!-- noscript pattern -->
<noscript>
	<img src="image.jpg" />
</noscript>
<img src="transparent.jpg" data-src="image.jpg" class="lazyload" />

[data-expand] 属性

通常，lazysizes 会将视口区域扩展到延迟预加载图像/iframe，这些图像/iframe 可能很快就会变得可见。可以使用该选项调整此值。

此外，可以使用每个元素的属性覆盖此常规选项。与常规选项不同，该属性还接受负值（所有数字，但被接受！）

这对于为预告片或其他元素添加揭幕效果变得特别方便：

<style>
.lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
	opacity: 1;
	transition: opacity 300ms;
}
</style>

<div class="teaser lazyload" data-expand="-20">
    <img data-src="image.jpg" class="lazyload" />
    <h1>Teaser Title</h1>
    <p>...</p>
</div>

CSS API

Lazysizes 在加载图像时添加类，并在加载图像后立即添加类。这可用于添加揭幕效果：

/* fade image in after load */
.lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
	opacity: 1;
	transition: opacity 300ms;
}

/* fade image in while loading and show a spinner as background image (good for progressive images) */

.lazyload {
	opacity: 0;
}

.lazyloading {
	opacity: 1;
	transition: opacity 300ms;
	background: #f7f7f7 url(loader.gif) no-repeat center;
}

损坏的图像符号

如果您正在使用属性但未声明 / 属性，则最终会得到一个损坏的图像符号。

有两种简单的方法可以处理它。

定义或添加以下 CSS：src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="

img.lazyload:not([src]) {
	visibility: hidden;
}

JS 接口

LazySizes 会自动检测类中的新元素，因此在大多数情况下，您不需要调用或配置任何内容。lazyload

JS API - 选项

可以通过声明名为 的全局配置选项对象来设置选项。此对象必须在 lazysizes 脚本之前定义。一个基本的例子：

window.lazySizesConfig = window.lazySizesConfig || {};

// use .lazy instead of .lazyload
window.lazySizesConfig.lazyClass = 'lazy';

// use data-original instead of data-src
lazySizesConfig.srcAttr = 'data-original';

//page is optimized for fast onload event
lazySizesConfig.loadMode = 1;

如果您使用的是模块捆绑器，建议在导入模块后直接更改选项：lazysizes

import lazySizes from 'lazysizes';
// other imports ...

lazySizes.cfg.lazyClass = 'lazy';

以下是选项列表：

• lazySizesConfig.lazyClass（默认值：）：所有应延迟加载的元素的标记类（只能有一个 .如果你需要添加一些其他元素，而没有定义的类，只需根据JS添加它："lazyload" class $('.lazy-others').addClass('lazyload');)
• lazySizesConfig.preloadAfterLoad（default： ）：lazysizes 是否应在窗口 onload 事件之后加载所有元素。注意：lazySizes 仍会在延迟队列中下载那些不在视图中的图像，以便加载后的其他下载不会被阻止。
• lazySizesConfig.preloadClass（默认值：）：加载后应延迟预加载的元素的标记类。如果选项设置为 ，则这些元素甚至将被预加载。注意：此类也可以动态设置（）。"lazypreload" preloadAfterLoad false $currentSlide.next().find('.lazyload').addClass('lazypreload');
• lazySizesConfig.loadingClass（默认值：）：这将在图像加载开始后立即添加到元素中。可用于添加揭幕效果。
• lazySizesConfig.loadedClass（默认值：）：一旦加载图像或图像进入视图，这将添加到任何元素中。可用于添加揭幕效果或应用样式
• lazySizesConfig.expand（默认值：）：该选项将计算出的可视视口区域向各个方向展开，以便可以在元素可见之前加载元素。默认值的计算取决于设备的视口大小。（注意：合理值介于 和 之间（取决于选项。如果您有很多小图像，或者您正在使用 LQIP 模式，您可以降低该值，如果您有较大的图像，请将其设置为更高的值。另请注意，lazySizes 将动态地将此值缩小到浏览器当前正在下载，并在浏览器网络当前处于空闲状态且用户未滚动时将其展开（通过将选项乘以 （））。此选项也可以用属性覆盖:370-500 expand 300 1000 expFactor 0 expand 1.5 expFactor [data-expand]。
• lazySizesConfig.minSize（默认值：）：用于功能。用于计算属性的图像的最小大小。如果它在脚本下，则遍历 DOM 树，直到找到结束的父项：40 data-sizes="auto" sizes minSize minSize。
• lazySizesConfig.srcAttr（默认值：）：属性，应转换为 "data-src" src
• lazySizesConfig.srcsetAttr（默认值：）：属性，应转换为 "data-srcset" srcset
• lazySizesConfig.sizesAttr（默认值：）：属性，应转换为 。"data-sizes" sizes "auto" sizes,几乎只对值有意义。否则，应直接使用该属性。
• lazySizesConfig.customMedia（默认值：）：选项对象是不同媒体查询的别名映射。它可用于通过创建带标签的媒体查询，将多个特定的媒体查询实现（布局）与属性（内容/结构）分开/集中。
• lazySizesConfig.loadHidden（默认值：）：是否加载元素。重要提示：lazySizes 将加载隐藏的图像，这些图像总是延迟的。如果您希望它们尽可能快地加载，则可以使用，但绝不能或 .true visibility: hidden opacity: 0.001 visibility: hidden opacity: 0
• lazySizesConfig.ricTimeout（缺省值：）：用于 的超时选项。合理值介于：0、100 - 1000。（低于 50 的值禁用该功能0 requestIdleCallback requestIdleCallback）
• lazySizesConfig.throttleDelay（默认值：）：用于限制所有侦听器的超时选项。合理值介于：66 - 200 之间。

<script>
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.customMedia = {
    '--small': '(max-width: 480px)',
    '--medium': '(max-width: 900px)',
    '--large': '(max-width: 1400px)',
};
</script>


<picture>
	<!--[if IE 9]><video style="display: none;><![endif]-->
	<source
		data-srcset="http://placehold.it/500x600/11e87f/fff"
		media="--small" />
	<source
		data-srcset="http://placehold.it/700x300"
		media="--medium" />
	<source
		data-srcset="http://placehold.it/1400x600/e8117f/fff"
		media="--large" />
	<source
        data-srcset="http://placehold.it/1800x900/117fe8/fff" />
    <!--[if IE 9]></video><![endif]-->
    <img

        data-src="http://placehold.it/1400x600/e8117f/fff"
        class="lazyload"
        alt="image with artdirection" />
</picture>

• lazySizesConfig.expFactor（默认值：）：用于计算“预加载扩展”，方法是将正常值乘以用于在浏览器空闲时预加载资产（没有重要的网络流量和滚动）。（合理值介于选项之间，取决于选项）。
• lazySizesConfig.hFac（默认值：）：（水平系数）通过将该值乘以该值来修改水平扩展。用例：在轮播的情况下，通常希望使水平扩展比正常的垂直扩展选项更窄。合理值介于 0.4 - 1 之间。在水平滚动网站的可能性很小的情况下，也是 1 - 1.5。
• lazySizesConfig.loadMode（默认值：）：可用于约束允许的加载模式。可能的值为 0 = 不加载任何内容，1 = 仅加载可见元素，2 = 加载非常近视图的元素（选项）和 3 = 加载不太近的视图元素（* 选项）。此值自动设置为加载后。如果您（也）针对 onload 事件进行优化，请更改此值，或者如果您的 onload 事件已经严重延迟，则将其更改为此值。
• lazySizesConfig.init（默认值：）：默认情况下，lazysizes 会自行初始化，以便尽快加载到视图资产中。在极少数情况下，您需要使用稍后的脚本设置/配置某些内容，您可以将此选项设置为并在以后显式调用。

JS API - 事件

LazySizes 提供了三个事件来修改或扩展 LazySize 的行为。

lazybeforeunveil：此事件将在“揭开”转换之前在每个 lazyload 元素上触发。此事件可用于扩展揭幕功能。如果事件是默认的，则将阻止转换操作：

//add simple support for background images:
document.addEventListener('lazybeforeunveil', function(e){
    var bg = e.target.getAttribute('data-bg');
    if(bg){
        e.target.style.backgroundImage = 'url(' + bg + ')';
    }
});
//or add AJAX loading
//<div class="lazyload" data-ajax="my-url.html"></div>

$(document).on('lazybeforeunveil', function(){
	var ajax = $(e.target).data('ajax');
    if(ajax){
        $(e.target).load(ajax);
    }
});

也可以用于延迟初始化，并且由于 lazysizes 还会自动检测 DOM 中的新元素，也用于 UI 小部件的自动和自初始化：

<script>
document.addEventListener('lazybeforeunveil', function(e){
    $(e.target)
        .filter('.slider')
        .slider({
            sliderOption: true
        })
    ;
});

document.addEventListener('lazybeforeunveil', function(e){
    $(e.target)
        .filter('.chart')
        .chart({
            animate: true
        })
    ;
});
</script>

<div class="slider lazyload lazypreload"></div>

<div class="chart lazyload" data-expand="-10"></div>

• lazyloaded：完全加载映像后，lazysizes 调度事件。虽然这通常会复制本机事件，但使用起来通常更方便。

• lazybeforesizes：在设置计算属性之前，将在具有该属性的每个元素上触发此事件。该属性设置为元素的计算宽度，并且可以更改为任意数字。如果事件是，则不会设置属性。

$(document).on('lazybeforesizes', function(e){
    //use width of parent node instead of the image width itself
    e.detail.width = $(e.target).parents(':not(picture)').innerWidth() || e.detail.width;
});

JS API - 方法

lazySizes.loader.unveil(DOMNode)

如果开发人员想要显示图像，即使它不在视口内，也可以调用：lazySizes.loader.unveil(DOMNode)

lazySizes.loader.unveil(imgElem);

注意：作为更lazysizes的替代方法，可以将类设置为：lazypreload$(imgElem).addClass('lazypreload');

lazySizes.autoSizer.checkElems()

如果一个或多个具有该属性的图像元素的大小发生了变化，可以调用（例如实现元素查询）：

lazySizes.autoSizer.checkElems();

lazySizes.loader.checkElems()

测试是否已看到新元素。通常，如果设置为 ，则只需要调用此方法。

lazySizes.init()

LazySizes 会自动初始化自身。如果设置为 ，则需要显式调用 .注意：如果在 lazysizes 和所有插件加载后显式调用，则可以加快视图内图像的初始加载速度。

<script>
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.init = false;
</script>

<script src="lazysizes.js"></script>
<script src="other-script.js"></script>
<script>
lazySizes.init();
</script>

浏览器支持

lazysizes 支持所有浏览器，支持 document.getElementsByClassName （== 所有浏览器，但不支持 IE8-）。如果您需要支持 IE8，另请参阅 noscript 扩展（或使用修改后的 noscript 模式或 LQIP 模式）。

如需要搜索引擎优化学习资料的小伙伴可以私信我或者扫描下面图片↓↓↓，可以免费领取seo最新面试题同时我们也有相应的学习群可以一起交流学习。