Lazysizes.js图片懒加载的使用
#编程技术 2022-12-31 13:25:45 | 全文 1251 字，阅读约需 3 分钟 | 加载中... 次浏览👋 相关阅读
- 通用的检测到广告屏蔽插件进行弹窗提示实现方法
- javascript | 原生JS多语言切换简单实现
- 给Edge大声朗读同源的微软tts增加下载音频按钮（tampermonkey脚本）
- 仿网易评论盖楼 JS 实现 | html
- typecho使用文件缓存加快打开速度
**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 检测用户代理是否能够滚动，如果不能滚动，则立即显示所有图像。
相关链接
Github：https://github.com/aFarkas/lazysizes
官方文档：https://github.com/aFarkas/lazysizes#combine-data-srcset-with-data-src
引入
<script src="lazysizes.min.js" async=""></script>
使用示例
<!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='//static.699pic.com/images/activeimg/635f99269f0d1.jpg!/both/317x216' alt=''/>
<div style="height: 1000px"></div>
<iframe frameborder="0"
class="lazyload"
allowfullscreen=""
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
</body>
</html>
LQIP 模糊图像占位符 模糊图像技术
如果您使用的是 LQIP（低质量图像占位符）模式，只需将低质量图像添加为 src