React 动态渲染图片,提升用户体验
作者:Andrew Wong <br/> 翻译原文:http://huziketang.com/blog/posts/detail?postId=58d14215a6d8a07e449fdd2b <br/> 转载请注明出处,保留原文链接以及作者信息 市场上竞争是非常残酷的,众所周知,仅仅有一个好的 idea 不足以使你的公司成为独角兽,执行力也同样重要。但是最终都会内化到产品中,进而归结为一个因素——用户体验。 用户体验并不是你的产品看起来多好看,还有它的性能如何?使用起来是否方便?——也就是让你的用户使用起来感到满意。 我们都有过这样的经历,打开一个 app 或者网页的时候看到如下的图片,从上到下一点点显示:
对于高分辨率的图片和视网膜屏幕,像这种图片从上到下慢慢展现的情况非常常见,通常我们只能静静地等着它渲染完毕。 这个问题是可以解决的 通常有两个很容易想到的解决方案:CDN 和本地缓存(你的浏览器会自动做本地缓存)都可以使图片加载更快。但是从技术上,我们还可以用很 trick 的方法,通过使用户感知产生错觉而提升用户体验。 下面就介绍两步 trick 的方法提升富媒体应用的用户体验。 第一步 - 使用占位符
(用占位符表明媒体正在加载) 占位符是一个目前很流行的方法,以前通常是用一个加载转轮来表示正在加载,使用占位符是和用户交流的一种方式,告诉用户正在加载的内容是——图片。 Facebook 和 LinkedIn 是使用技术来提升用户体验很好的两个例子。 第二步 - 在 DOM 中动态加载图片接下来优化方法是先把图片完全下载下来,再显示在屏幕上。这样就会避免边下载边显示而产生的从上到下一点点渲染的情况。我们使用 React 的
占位符是提前让用户产生预期,预期图片正在加载。而动态加载是在图片下载完成以后才显示,有效地避免了图片从上到下一点点渲染的情况,进一步提升了用户体验。 观看在线 Demo 我要代码!占位符方法对于占位符组件(本例子中使用 export default function () { return ( <ReactCSSTransitionGroup transitionName="loadingItem" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300}> <img className="feed__loading-item" src={img} /> </ReactCSSTransitionGroup> ) } 在我们的 Feed 组件的渲染中,只要还有 export default class Feed extends Component { ... render() { return ( <div className="feed"> ... {this.props.items.length > this.state.loadedItems.length && <LoadingItem /> } ... </div> ) } } 通过
|