本站承诺永不接任何虚假欺骗、联盟广告、弹窗广告、病毒广告、诱导充值等影响用户体验的广告,广告屏蔽插件会影响本站部分功能,还请不要屏蔽本站广告,感谢支持!

当前位置:首页 / 正文

2022-12-31 | 编程技术 | 504 次阅读 | 等你评论 | 1 次点赞 | 繁体

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

标签: javascript前端异步

猜你喜欢
typecho使用文件缓存加快打开速度
typecho 是一个伪静态的博客系统,如果不使用缓存,每次打开页面都会查询数据库,访问人数多了以后服务器压力倍增。但是,typecho 是一个 php 的程序,我们可以利用 php 将实时页面...
通用的检测到广告屏蔽插件进行弹窗提示实现方法
用的 js 方法来检测,按理说所有博客都能使用,就是在打开网页的时候进行一次判断。如果发现没有加载广告代码,就会出来一个弹窗来提示浏览者将本站加到广告拦截插件的白名单里面。别喷我,个人站长经营实...
javascript | 原生JS多语言切换简单实现
由于项目需要实现一个前端的多语言切换,不想因为一个简单的功能就引入 jQuery,所以经过 google 编程大法摸索出一个原生 JS 就可以实现的多语言前端切换的小例子,仅供参考。<bo...
Typecho 评论弹幕插件下载及食用教程
视频弹幕大家已经很熟悉了,他是直接显现在视频上的评论,可以以滚动、停留甚至更多动作特效方式出现在视频上,是观看视频的人发送的简短评论。最近在开发 超赞网站导航,突发奇想能不能给网页也加上弹幕,这...
原生js实现ajax方法
由于不想多引入一个 jquery,百度了一个原生 js 实现 ajax 的方法(超简单),挺不错的,现在就分享给大家,也给大家做个参考。首先新建一个 js 文件:function ajax(){...
Mysql 窗口函数学习
窗口函数是数据库查询中的一个经典场景,在解决某些特定问题时甚至是必须的。个人认为,在单纯的数据库查询语句层面【即不考虑 DML、SQL 调优、索引等进阶】,窗口函数可看作是考察求职者 SQL 功底的一
「微信读书」互助,组队抽取无限卡
![](https://cdn.wangtwothree.com/imgur/g4vjI87.png) 这个名叫「微信读书组队抽取无限卡」的服务,是帮助用户获取微信读书无限卡的另外一个渠道,它不用分
Windows快速批量删除大批文件或大数据量文件的命令
Windows 服务器或普通操作系统中经常会遇到很多生成的临时文件需要删除,如果需要删除的文件夹中数目很多,且文件很巨大时,如果通过鼠标选择文件夹再直接删除会响应得非常慢,特别是文件数量也巨大时。
反爬虫的极致手段,几行代码直接炸了爬虫服务器
作为一个站长,你是不是对爬虫不胜其烦?爬虫天天来爬,速度又快,频率又高,服务器的大量资源被白白浪费。 看这篇文章的你有福了,我们今天一起来报复一下爬虫,直接把爬虫的服务器给干死机。 **本
(首次提交评论需审核通过才会显示,请勿重复提交)