Lazysizes.js图片懒加载的使用

#编程技术 2022-12-31 13:25:45 | 全文 1251 字,阅读约需 3 分钟 | 加载中... 次浏览

👋 相关阅读


**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

Edit | Last updated on 2024-02-29 10:57:58




×