具有Intersection Observer API的10个Javascript延迟澳门威斯人登录图像库

Intersection Observer是一个API,用于在元素进入视口/视图时有条件地执行某些操作。所以这是一些JavaScript 延迟澳门威斯人登录图像 使用Intersection Observer API来最大化性能和用户体验的库。

Lozad.js

纯JS中的高性能,轻量级1kb且可配置的延迟澳门威斯人登录程序,不依赖于响应图像,iframe等。编写该文件的目的是使用最近添加的Intersection Observer API来延迟澳门威斯人登录图像,iframe,广告,视频或任何其他元素,从而显着提高性能。现有的延迟澳门威斯人登录库连接到scroll事件或使用定期计时器,并在需要延迟澳门威斯人登录的元素上调用getBoundingClientRect。但是,这种方法非常缓慢,因为每次调用getBoundingClientRect都会迫使浏览器重新布局整个页面,并且会给您的网站带来很大的麻烦。 IntersectionObserver的目的是使这种效率更高,性能更高,并且它已安装在Chrome 51中。IntersectionObservers让您知道观察到的元素何时进入或退出浏览器的视口。

 Lozad.js

延迟澳门威斯人登录

LazyLoad is a fast, lightweight and flexible script that speeds up your web application 通过 loading your content images, 视频s and iframes only as they enter the viewport. It’s written in plain 香草JavaScript,它利用了IntersectionObserver API,可与响应图像配合使用,并支持本地延迟澳门威斯人登录。 LazyLoad不需要监听滚动和调整大小事件,而是使用了Intersection Observer API,它是一种崭新的,快速的方法,可以检测元素是否在浏览器视口内。您的用户将看到速度较慢甚至是快速的设备或计算机中的差异。

 延迟澳门威斯人登录

Yall.js

yall.js是功能齐全的SEO友好型惰性澳门威斯人登录器,用于<img>, <picture>, <video> and <iframe>元素以及CSS背景图片。它适用于所有现代浏览器,包括IE11。它在可用的地方使用Intersection Observer,但是从版本3开始,必须为旧版浏览器填充此API。它还可以使用Mutation Observer来监视DOM中的更改,以在初始澳门威斯人登录后延迟澳门威斯人登录已附加到DOM的元素,这对于单页应用程序可能是理想的。它还可以使用requestIdleCallback优化浏览器空闲时间的使用,并通过使用requestAnimationFrame减少垃圾邮件。

 Yall.js

可访问图像延迟澳门威斯人登录

这是一个轻量级的非依赖性javascript模块,它在延迟澳门威斯人登录上增加了一种针对可访问性的不同方法。大多数现有选项的工作方式是使图像掉落src属性,或者使图像创建base64数据/低分辨率模糊替代版本,或者将img元素包含在<noscript>标签。这可能很笨拙且冗长,主要问题是改变了原始元素的语义。

可访问图像延迟澳门威斯人登录

反应简单图

使用IntersectionObserver API和优先级提示对延迟澳门威斯人登录图像进行反应。

反应简单图

Bounds.js

异步边界检测–延迟澳门威斯人登录,无限滚动等。无论你’延迟澳门威斯人登录图像,实施无限滚动或避免恋人。它’设置边界很重要。从历史上看,边界检测需要混合使用事件处理程序,循环和对getBoundingClientRect的调用。由于这些操作在主线程上运行,因此会降低性能。 Bounds.js 违反了这些期望,提供了一个简单而强大的API。它异步检测元素之间的交集,从而使复杂的操作脱离主线程并提高了性能。

 Bounds.js

V懒惰影像

使用“交集观察器”延迟澳门威斯人登录图像,应用渐进式渲染和CSS动画。一个Vue.js组件,可以在使用Intersection Observer API进入视口时自动延迟澳门威斯人登录图像。

V懒惰影像

延迟观察者负载

一个使用Intersection Observer延迟澳门威斯人登录图像的库。

延迟观察者负载

Ng在视口中

ng-in-viewport为您提供了使用Intersection Observer API的指令。提供一种简单的方法来异步观察目标元素与祖先元素或顶级文档的交集中的变化’s viewport.

Ng在视口中

格吕伯特

gumbert.js是一个小助手,可以通过动态导入和代码拆分来懒惰地澳门威斯人登录DOM Elements,StyleSheets和JavaScript文件。

 格吕伯特

发表评论

请客气。我们对此表示赞赏。您的电子邮件地址将不会被发布,并且必填字段已被标记

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.