10个使用Intersection Observer API的Javascript延迟加载图像库

Intersection Observer是一个新的API,用于在元素进入视口/视图时有条件地执行某些操作。因此,这里有一些js懒加载图像库,它们使用Intersection Observer API来最大化性能和用户体验。

Lozad.js


Lozad.js是一个高性能,轻量级(1kb)且可配置的懒加载库,不依赖于其他库的纯js插件。为了更显着地提高性能,lozad.js添加了Intersection Observer API来懒加载图片,iframe,广告,视频或任何其他元素。现有的懒加载库基本都是基于scroll事件和计时器,并在需要延迟加载的元素上调用getBoundingClientRect。但是,这种方法效率较低,因为每次调用getBoundingClientRect都会使浏览器重新布局整个页面,并且可能会给您的网站带来很大的麻烦。 IntersectionObserver的目的就是解决这种问题,让您知道观察到的元素何时进入或退出浏览器的可视区域,从而效率更高,性能更高,兼容性上,在Chrome 51及以上就可以使用。

 

Lazyload


LazyLoad是一个快速,轻量级和灵活的插件,通过仅在内容图像,视频和iframe进入可视区域时加载它们,来加快Web应用的响应速度。它使用纯JavaScript编写,利用了IntersectionObserver API,可与响应式图片配合使用,并支持原生懒加载。 LazyLoad不需要监听scroll和esize事件,而是使用了Intersection Observer API,它是一种新的,快速的方法,可以检测元素是否在浏览器可视区域内。 

 

Yall.js


yall.js是功能强大的SEO友好型懒加载库,可用于<img>,<picture>,<video>和<iframe>元素以及CSS背景图像。它适用于所有现代浏览器,包括IE11。它在浏览器兼容情况下会使用Intersection Observer API,但是从版本3开始,必须在旧版浏览器上使用polyfill才能使用。它还可以使用Mutation Observer来监听DOM的改变,然后在页面加载后,延迟加载该元素,这对于单页应用来说应该是挺好的。它还可以使用requestIdleCallback优化浏览器性能,并通过使用requestAnimationFrame减少页面阻塞。

 

Accessible Image Lazy Load


它是一个轻量级的无依赖的javascript库,对于网页无障碍上也添加了相应处理。现有的库的实现方式是替换图片的src属性,或者创建图片的base64数据/低分辨率图片替代,或者将img元素包含在<noscript>中。这就改变了元素原有的语义,从而显得不那么友好。 

 

React Simple Img


也是使用IntersectionObserver API的一款优雅的懒加载库

 

Bounds.js


Bounds.js拥有异步边界检测的懒加载,无限滚动的特点。它摆脱了getBoundingClientRect所带来的性能问题,提供了简单而强大的api,使复杂的操作脱离主线程运行,并提高了性能

 

V Lazy Image


使用Intersection Observer API监听可视区域进行懒加载,并渐进式地渲染元素和css动画

 

Lazy Observer Load


同样一款使用Intersection Observer的懒加载库

 

Ng In Viewport


ng-in-viewport提供了使用Intersection Observer API的angular指令。提供一种简单的方法来异步观察目标元素与父元素或窗口的视口相交处的变化。

 

Gluebert


gumbert.js是一个懒加载文件的小助手,可以通过动态导入和代码拆分来懒加载DOM元素,css和JavaScript文件。