react前端显示图片_在react中怎么动态渲染图片?
在react中怎么动态渲染图片?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
React 动态渲染图片,提升用户体验
市场上竞争是非常残酷的,众所周知,仅仅有一个好的 idea 不足以使你的公司成为独角兽,执行力也同样重要。但是最终都会内化到产品中,进而归结为一个因素——用户体验。
用户体验并不是你的产品看起来多好看,还有它的性能如何?使用起来是否方便?——也就是让你的用户使用起来感到满意。
我们都有过这样的经历,打开一个 app 或者网页的时候看到如下的图片,从上到下一点点显示:
对于高分辨率的图片和视网膜屏幕,像这种图片从上到下慢慢展现的情况非常常见,通常我们只能静静地等着它渲染完毕。
这个问题是可以解决的
通常有两个很容易想到的解决方案:CDN 和本地缓存(你的浏览器会自动做本地缓存)都可以使图片加载更快。但是从技术上,我们还可以用很 trick 的方法,通过使用户感知产生错觉而提升用户体验。
下面就介绍两步 trick 的方法提升富媒体应用的用户体验。
第一步 - 使用占位符
(用占位符表明媒体正在加载)
占位符是一个目前很流行的方法,以前通常是用一个加载转轮来表示正在加载,使用占位符是和用户交流的一种方式,告诉用户正在加载的内容是——图片。
Facebook 和 LinkedIn 是使用技术来提升用户体验很好的两个例子。
第二步 - 在 DOM 中动态加载图片
接下来优化方法是先把图片完全下载下来,再显示在屏幕上。这样就会避免边下载边显示而产生的从上到下一点点渲染的情况。我们使用 React 的 onLoad 事件来实现这一功能。给服务器发送一个获取图片文件的请求,但是先不在 DOM 中渲染,直到整个文件都下载完成以后再渲染出来
占位符是提前让用户产生预期,预期图片正在加载。而动态加载是在图片下载完成以后才显示,有效地避免了图片从上到下一点点渲染的情况,进一步提升了用户体验。
我要代码!
占位符方法
对于占位符组件(本例子中使用 LoadingItem),我们可以随心地展示想要展示的图片,代码如下:export default function () { return (
transitionName="loadingItem"
transitionAppear={true}
transitionAppearTimeout={500}
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
)
}
在我们的 Feed 组件的渲染中,只要还有 FeedItems 没有加载完成,就可以使用 LoadingItem:export default class Feed extends Component {
...
render() {
return (
...
{this.props.items.length > this.state.loadedItems.length &&
}
...
)
}
}
通过 onLoad 动态渲染图片
我们的 Feed 组件代码如下:export default class Feed extends Component {
constructor(props) {
super(props)
this.state = { loadedItems: [] }
}
onLoad(feedItem) {
this.setState(({ loadedItems }) => {
return { loadedItems: loadedItems.concat(feedItem) }
})
}
render() {
return (
{this.props.name}
{this.state.loadedItems.map((item, i) =>
imgPath={item.imgPath}
name={item.name}
renderModal={this.props.renderModal}
key={i} />
)}
{this.props.items.length > this.state.loadedItems.length &&
}
{this.props.items.map((item, i) =>
src={item.imgPath}
onLoad={this.onLoad.bind(this, item)}
key={i} />
)}
)
}
}
这段代码中发生了什么?底部有一个隐藏的
本文结束
是不是很简单,简单的说明希望能够帮助正在受这一问题困扰的朋友。下面给出例子和代码。
更多web前端开发知识,请查阅 HTML中文网 !!
react前端显示图片_在react中怎么动态渲染图片?相关推荐
- 自己解决在Vue中动态渲染图片不显示的问题
乐于助人 前言 分析思路 1. 绝对路径 2. 相对路径 总结 本篇文章记录的是自己在 Vue-Cli2 中如何去解决的这个问题,心里路程比较多,所以话比较多哈哈,感谢阅读,大概耗时2分钟 前言 如上 ...
- vue渲染动态渲染图片_动态/动态渲染视频和音频
vue渲染动态渲染图片 Vue-Viaudio (vue-viaudio) Dynamically/Reactively render videos and audios. 动态/动态渲染视频和音频. ...
- 如何录制gif动态图片并在CSDN中插入动态图片
我们在网上浏览别人的博客时,经常可以看到以gif动态图显示的程序效果演示和代码段,那么如何录制gif动态图片并在CSDN中插入动态图片呢? 下面介绍一种简单的方法,了解之后,你也可以将其 ...
- react前端显示图片_在react里怎么引用图片
在react里怎么引用图片 方法一:import引入 import引入图片相比引用public文件夹里的图片会经过webpack的处理,如果导入小于10,000字节的图像将返回数据URI而不是路径,这 ...
- react 面试题 高级_常见react面试题汇总(适合中级前端)
转载自<原文> React 中 keys 的作用是什么? Keys 是 React 用于追踪哪些列表中元素被修改.被添加或者被移除的辅助标识. render () {return( {th ...
- react 数字转字符_深入浅出 React -- JSX
什么是 JSX JSX 是一个 JavaScript 的语法扩展.JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能 在 React 中,JSX 仅仅是 React.crea ...
- react 面试题 高级_常见 React 面试题
(给前端大全加星标,提升前端技能) 作者:小胡 https://github.com/nanhupatar/FEGuide/blob/master/框架/react.md React 中 keys 的 ...
- ArcGis如何插入图片_在word中插入图片,如何避免失真模糊?实用文档建议收藏...
插入图片 在WORD文档中插入图片是一个相当常用的操作. 一般通常的做法,是使用工具截图或在其他工具中复制的图片类内容,然后在WORD文档中粘贴出来. 还有一种做法,是使用功能区"插入&qu ...
- emwin读取sd图片_第12章emwin(ucgui)jpeg图片显示.pdf
您所在位置:网站首页 > 海量文档  > 计算机 > windows相关 第12章emwin(ucgui)jpeg图片 ...
最新文章
- docker 报错 non-overlapping IPv4 address pool among the defaults to assign to the network 解决方法
- EventBus初解
- 第五十三篇、OC利用AFN上传视频到服务器
- 【☀️Linux什么姿势最舒服?简单讲讲☀️】嵌入式Linux入门
- 小区社交应用:如何打破近在眼前的物理障碍和陌生感?
- educoder 使用线程锁(lock)实现线程同步_Python并行编程(二):多线程锁机制利用Lock与RLock实现线程同步
- 【报名】与阿里云一同探索视频云的新技术与新场景
- excel if in函数_【Excel函数】Small+Index+IF 一对N返回
- img 加载 svg占位符_如何使用SVG作为占位符以及其他图像加载技术
- 用路由做企业管理:所有人都说不可能的时候(中)
- 基于Docker搭建分布式消息队列Kafka
- Python自动获取Redi缓存验证码
- android audiotrack mp3,播放mp3数据压缩由JLayer和Audiotrack latin mp3在android
- linux麒麟 ftp,麒麟 vsftp 搭建
- JVisualVM 简介
- 微信公众平台的账号、微信商户平台的账号、以及小程序的账号都是不同的
- linux stm32 虚拟串口驱动安装,stm32的usb虚拟串口驱动win7系统64位和32位不能正常安装的解决办法!stm32 virtual comport win7(终极解决办法)...
- 丁腈橡胶的广泛应用及其特点
- msf之msfvenom的使用—使用Kali渗透工具生成远控木马
- hifiasm对HiFi PacBio进行组装