1. Layzr.js 简介
Layzr.js 是一个轻量级的插件，用于延迟加载响应式图像。它使用了 Vanilla JavaScript，没有依赖于 jQuery 等第三方库。这意味着你可以在任何网站上使用它，而不必担心可能影响其他库或插件。
标准的图片加载方法是在文档树加载后加载所有图像。当图像数量很多并且它们的大小很大时，这将导致网页加载速度变慢并且会减缓页面显示。在这种情况下，延迟加载图像的策略是更好的解决方法。Layzr.js 就提供了这样的功能，能够优化网站使用情况，从而提高用户体验。
2. Layzr.js 的使用
2.1 安装 Layzr.js
你可以从 GitHub 下载 Layzr.js 的源码并将它添加到你的项目中。也可以直接使用 CDN 引用，下面是使用CDN的方法：
<script src="https://cdn.jsdelivr.net/npm/layzr.js@4.0.2/dist/layzr.min.js"></script>2.2 定义延迟加载的图像
在 HTML 文件中，你需要将原本设定的 img 标签的属性 src 改为 data-src，如下所示：
<img class="lazy" data-src="img/some-image.jpg" alt="Some Image">
这里，我们给 img 标签增加了一个 lazy 的 class，以便对这些图片进行延迟加载。
2.3 初始化 Layzr.js
在 JavaScript 文件中，我们需要初始化 Layzr.js，这里我们使用 layzr.js 中的方法 layzr() 进行初始化。具体方式如下：
var layzr = new Layzr({
// 这里写初始化代码
})
这里，我们对 Layzr 构造函数的参数进行了设置。你也可以自定义参数，例如：
var aClient = new Layzr({
normal: 'loader-normal', // 普通图像
retina: 'loader-retina', // 高清视网膜（retina）屏幕下的图像
srcset: 'data-srcset', // 图像的来源
threshold: 0.5, // 阈值触发到达边界时
callback: function () { // 在加载图像后要做的事情
console.log('loaded aClient')
}
})
这些参数的功能说明如下：
normal: 普通图像，这些图像将会在非视网膜（非retina）屏幕下使用。
retina: 高清视网膜（retina）屏幕下的图像，这些图像通常比普通图像大2倍。
srcset: 图像的来源，这里我们设置成了 data-srcset。
threshold: 阈值触发到达边界时，默认值是0.6。
callback: 加载图像后要做的事情。
3. Layzr.js 的原理
Layzr.js 在图片远离视口时才将其加载。其原理是根据浏览器滚动事件检查图像是否越过了阈值。如果是，那么它将使用图像的 data-src 属性替换 img 标签的 src 属性。
Layzr.js 还使用了 requestAnimationFrame 优化效果，在动画帧中加载图像，而不是阻塞浏览器主线程。这将防止其他动画在加载过程中出现断裂、闪烁或暂停的情况。
4. 总结
当今，日益增长的移动设备和不断增长的网站大小使得延迟加载图像成为一种重要的网络优化方法。Layzr.js 是实现这种技术的一种轻量级工具，如果你想优化自己的网站加载时间，构建更快、更好的用户体验，这个工具将是你不错的选择。