Lazysizes.js 图片懒加载的使用方法详解

最新推荐文章于 2024-05-10 09:55:03 发布

Shopify 专家

最新推荐文章于 2024-05-10 09:55:03 发布

阅读量4.4k

点赞数 2

分类专栏： JavaScript shopify

本文链接：https://blog.csdn.net/BaymaxCSDN/article/details/110129418

版权

shopify 同时被 2 个专栏收录

23 篇文章 41 订阅

订阅专栏

JavaScript

6 篇文章 0 订阅

订阅专栏

Lazysizes.js 图片懒加载的使用方法详解

摘要

官方介绍：

**lazysizes **是一种快速（无垃圾），对SEO友好且可自动初始化的lazyloader，用于图像（包括响应图像picture/ srcset），iframe，脚本/小部件等。它还通过区分关键视图元素和近视图元素来优先分配资源，以使感知性能更快。

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

特色功能：

自动检测任何Web环境中当前和将来的lazyload元素的可见性更改：该脚本用作通用，自初始化，自配置和自毁组件，并检测任何当前和将来的图像/ iframe的可见性更改无论元素是通过用户滚动，通过CSS动画触发:hover还是通过任何JS行为（旋转木马，滑块，无限滚动，砖石，同位素/过滤/排序，AJAX，SPA …）触发，CSS元素都会自动显示。它还可以自动与任何JS- / CSS- / Frontend-Framework（jQuery mobile，Bootstrap，Backbone，Angular，React，Ember（也请参阅attrchange / re-initialization扩展）一起使用。
面向未来：它直接包含标准的响应式图像支持（picture和srcset）
关注点分离：对于响应图像支持，它添加了自动sizes计算功能，还为媒体查询功能添加了别名。如果添加带有CSS的可滚动容器（溢出：自动）或创建包含图像的大型菜单，则也不需要更改JS。
性能：它基于高效的最佳实践代码（运行时和网络），以60fps的速度无垃圾地工作，并且可以与CSS和JS繁重的页面或Web应用程序上的数百个图像/ iframe一起使用。
可扩展：它提供JS和CSS钩子，以在视图回调或效果中扩展具有任何类型的延迟加载，延迟实例化的延迟大小（另请参见可用的插件/片段）。
智能预取/智能资源优先级区分：lazysizes预取/预加载附近的视图资产，改善用户体验，但仅在浏览器的网络空转（另见expand，expFactor和loadMode选项）。通过这种方式，视图元素的加载速度更快，并且接近视图的图像在进入视图之前就被延迟加载。
轻巧但成熟的解决方案：lazysizes在轻巧和快速，可靠的解决方案之间具有适当的平衡
SEO改进：lazysizes不会从Google隐藏图像/资产。无论您使用哪种标记模式。Google不会滚动/与您的网站互动。lazysizes检测用户代理是否能够滚动，如果不能滚动，则立即显示所有图像。

补充

关于Lazysizes SEO改进 这一点上我不明白它是如何做到这样点的，从爬虫的角度来讲爬虫并不会执行脚本，而 lazysizes 又是脚本。所以很费解，目前个人猜测，它这里所说的 Google 是一个服务端浏览器它能够执行且渲染页面

使用说明

安装

下载

1、直接下载 Lazysizes.min.js 脚本

2、yarn 或 npm、bower 下载

yarn add lazysizes --save
npm install lazysizes --save
bower install lazysizes --save

引入

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

import 'lazysizes'; // 导入插件
import 'lazysizes/plugins/parent-fit/ls.parent-fit'; // 注意：切勿从npm包中导入/获取* .min.js文件

使用示例

从API反面来讲解 Lazysizes 不是很好讲，所以我采用示例的方式来给大家介绍 Lazysizes 的功能

懒加载（延时加载）

当资源在可视区域或接近可视区域时再加载

（官方说明）智能预取/智能资源优先级区分：lazysizes预取/预加载附近的视图资产，改善用户体验，但仅在浏览器的网络空转（另见expand，expFactor和loadMode选项）。通过这种方式，视图元素的加载速度更快，并且接近视图的图像在进入视图之前就被延迟加载

API

属性	值
class	lazyload
data-src	图片链接

示例代码

<img class="lazyload" data-src='https://placehold.it/600x300//f00?text=BaymaxCSDN 1-懒加载' alt=''/>

<iframe class="lazyload" data-src="//www.youtube.com/embed/ZfV-aYdU4uE"></iframe>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1-懒加载</title>
</head>
<body>
  <div style="height: 2000px"></div>
  <img class="lazyload" data-src='https://placehold.it/600x300//f00?text=BaymaxCSDN 1-懒加载' alt=''/>
  <div style="height: 1000px"></div>
  <iframe frameborder="0"
    class="lazyload"
    allowfullscreen=""
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
  </iframe>
  <script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
</body>
</html>

效果图

在这里插入图片描述

补充

通过效果图我们可以看到，当图片或者iframe接近可视区域时，客户端才发起对应的资源请求。

响应式图像 `data-srcset` 与结合 `data-src`

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

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

上面是官方的说明，老实说我看不大懂官方的这个说明，所以只能遵从小平爷爷的祖训，通过实践来践行这个功能。

API

属性	值
class	lazyload
data-srcset	图片集
data-src	图片链接

注意：

1、data-src 这个属性并不影响图片的响应式，目前无法确认的它的主要作用是什么（data-src的值最终会赋值给img的src属性，所以我目前认为其作用是优化图片可读性）

2、官方文档我注意到官方文档会在 data-srcset 的值前面会再插入一条与data-src相同的链接，但插不插入都不影响响应式，且在官方文档的后续示例里面也并没用在插入该链接，所以我觉得应该按照官方后续示例的写法，仅将其放在第一位，但不需要重复插入

示例代码

<img
  class="lazyload"
  data-src="https://placehold.it/600"
  data-srcset="https://placehold.it/600 600w,
                https://placehold.it/220 220w,
                https://placehold.it/300 300w,
                https://placehold.it/600 600w,
                https://placehold.it/900 900w"
/>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2-响应式图片</title>
  <style>
    img {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <div class="img-wrap">
    <img
      class="lazyload"
      data-src="https://placehold.it/600"
      data-srcset="https://placehold.it/600 600w,
                    https://placehold.it/220 220w,
                    https://placehold.it/300 300w,
                    https://placehold.it/600 600w,
                    https://placehold.it/900 900w"
    />
  </div>
  <script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
</body>
</html>

效果图

效果图就不用我去截图了，你们想象下也就知道

img 的宽度 (w)	显示的图片
w <= 220	https://placehold.it/220
220 < w <= 300	https://placehold.it/300
300 < w <= 600	https://placehold.it/600
600 < w	https://placehold.it/900

补充

这里有一点需要补充一下，它的响应式图片具有一个缓存图片的优先级。它在加载图片的时候会先读取缓存图片。例如：它读取到本地缓存有 https://placehold.it/900 的图片（srcset最大值对应的图片），那么无论当前图片尺寸为多少，它都会显示这张图片

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

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

API

属性	值
class	lazyload
src	占位图片链接
data-src	图片链接

示例代码

<img
    class="lazyload"
    src="https://placehold.it/300x150//ff0000?text=Baymaxcsdn"
    data-src='https://cdn.shopify.com/s/files/1/0449/5491/0874/files/sl-1.png'
/>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3-LQIP/模糊图像占位符/模糊图像技术</title>
</head>
<body>
  <img
    class="lazyload"
    src="https://placehold.it/300x150//ff0000?text=Baymaxcsdn"
    data-src='https://cdn.shopify.com/s/files/1/0449/5491/0874/files/sl-1.png'
    style="max-width: 100%;"
  />
  <script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
</body>
</html>

效果图

在这里插入图片描述

补充

根据上图效果，我可以明显知道的 src 的图片起到了占位的作用（注意：src的图片会最先加载）。

利用 LQIP技术我可以用来做 加载动画（不建议使用这个来做加载动画）或 模糊/淡入效果。具体实现方法可以参考官方文档

模糊/淡入效果 可以使用 Lazysizes 的扩展插件 lazysizes Blur Up 来实现（ lazysizes Blur Up 案例），也可以自己结合 CSS动画来实现。

在这里插入图片描述

现代透明srcset图案（延时加载 src）

将普通src属性与透明或低质量图像组合为srcset值和data-srcset属性。这样，现代浏览器将在不加载src属性的情况下进行延迟加载，而所有其他浏览器将仅回src退到初始属性（没有lazyload）。

根据 [LQIP 模糊图像占位符模糊图像技术](#LQIP 模糊图像占位符模糊图像技术) 我们可以知道，src起到占位符的作用，但是它不会进行懒加载。现代透明srcset图案便是用来解决这个问题

API

属性	值
class	lazyload
src	占位图片链接
data-src	图片链接
srcset	透明图片Bate64

透明图片 Bate64 : data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

示例代码

 <img
  src="https://placehold.it/600"
  srcset="https://cdn.shopify.com/s/files/1/0449/5491/0874/files/sl-1.png"
  data-srcset="https://placehold.it/600 600w,
    https://placehold.it/220 220w,
    https://placehold.it/300 300w,
    https://placehold.it/900 900w"
  class="lazyload" />

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>4-现代透明srcset图案</title>
  <style>
    img {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <div>
    <div style="height: 1600px"></div>
    <img
      src="https://placehold.it/600"
      srcset="https://cdn.shopify.com/s/files/1/0449/5491/0874/files/sl-1.png"
      data-srcset="https://placehold.it/600 600w,
        https://placehold.it/220 220w,
        https://placehold.it/300 300w,
        https://placehold.it/900 900w"
      class="lazyload" />
  </div>
  <script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
</body>
</html>

CSS API （加载动画）

lazysizeslazyloading在图像加载时添加类，在图像加载后立即添加类lazyloaded。这可以用来添加加载动画（揭幕效果）

API

CSS 类名	阶段
lazyload	图片未加载
lazyloading	图片加载中
lazyloaded	图片加载结束
ls-is-cached、lazyloaded	图片加载成功
仅 lazyloaded	图片加载失败

示例代码

利用上述 API 我们可以用其来做加载动画，当然不仅仅可以用来做加载动画，可以用来做其他效果如淡入效果等，具体的看你个人需要和发挥

.lazyload {
	opacity: 0;
}
.lazyloading {
	opacity: 1;
	transition: opacity 300ms;
	background: #f7f7f7 url(../assets/loading.svg) no-repeat center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1-懒加载</title>
  <style>
    .lazyload {
      opacity: 0;
    }
    .lazyloading {
      opacity: 1;
      transition: opacity 300ms;
      background: #f7f7f7 url(../assets/loading.svg) no-repeat center;
    }
    img {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <div style="width: 800px;">
    <img class="lazyload" data-src='https://cdn.shopify.com/s/files/1/0449/5491/0874/files/sl-1.png' alt=''/>
  </div>
  <script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
</body>
</html>

其他问题

Noscript模式（Javascript禁用问题处理）

如果担心禁用JavaScript，则可以将此简单模式与noscript元素内的图像结合使用。

代码

<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" />

补充

这里我就不多做解释，看代码相信你也能看懂

结语

目前关于 Lazysizes 的使用先写到这里。Lazysizes 的功能远不止这些，但有了这些基本也能解决你在图片加载的问题，至于其他功能后面再继续为大家补充

Script，则可以将此简单模式与noscript元素内的图像结合使用。

代码

<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" />

补充

这里我就不多做解释，看代码相信你也能看懂

结语

目前关于 Lazysizes 的使用先写到这里。Lazysizes 的功能远不止这些，但有了这些基本也能解决你在图片加载的问题，至于其他功能后面再继续为大家补充

Shopify 专家

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
2
评论
Lazysizes.js 图片懒加载的使用方法详解

Lazysizes.js 图片懒加载的使用方法详解摘要官方介绍： **lazysizes **是一种快速（无垃圾），对SEO友好且可自动初始化的lazyloader，用于图像（包括响应图像picture/ srcset），iframe，脚本/小部件等。它还通过区分关键视图元素和近视图元素来优先分配资源，以使感知性能更快。它也可能成为您集成响应式图像的第一工具。它可以自动计算sizes响应图像的属性，它允许您media与CSS共享对属性的媒体查询，从而帮助将布局（CSS）与内容/结构（HTM
复制链接

扫一扫