react-adaptive-image:React组件,可根据用户的视口大小和屏幕密度(视网膜显示)调整大小,从而在滚动时加载懒惰的图像

时间:2024-05-22 08:30:14
【文件属性】:

文件名称:react-adaptive-image:React组件,可根据用户的视口大小和屏幕密度(视网膜显示)调整大小,从而在滚动时加载懒惰的图像

文件大小:76KB

文件格式:ZIP

更新时间:2024-05-22 08:30:14

JavaScript

React自适应图像 基于视口和屏幕像素密度的惰性图像加载以及可选的动态调整大小。 为正确的屏幕尺寸提供正确的内容。 该React组件查看其自己的dom节点,并根据其自身的宽度请求适当大小的图像。 除非将其延迟加载到dom中,否则不会发生图像请求。 创建该库的目的是平衡图像加载时间/质量以及内容丰富的网站上的折页性能。 要求 对于动态调整大小,您必须具有允许根据URL参数进行调整大小的服务器或CMS。 开箱即用的一些开源库。 它有什么作用? 如果您需要在多种浏览器尺寸(移动设备,平板电脑,台式机,5k电视)上显示图片,但又不想牺牲基于用户设备的质量或性能,则该库将允许您提供正确的图片任何分辨率下的尺寸。 该组件与允许调整大小的图像服务器一起使您可以轻松地做到这一点。 我是node-image-steam的忠实拥护者,但这取决于您,并且有一种简单的方法可以配置如下所示的URL生成


【文件预览】:
react-adaptive-image-master
----src()
--------utils()
--------components()
--------index.js(159B)
----.babelrc(674B)
----.npmignore(259B)
----.travis.yml(40B)
----LICENSE(11KB)
----__tests__()
--------adaptiveImage_test.js(2KB)
----README.md(6KB)
----dist()
--------utils()
--------components()
--------index.js(474B)
----license.md(34KB)
----.gitignore(110B)
----test-setup.js(301B)
----package-lock.json(221KB)
----package.json(2KB)

网友评论