巧用代理设计模式(Proxy Design Pattern)改善前端图片加载体验

这篇文章介绍一种使用代理设计模式（Proxy Design Pattern）的方法来改善您的前端应用里图片加载的体验。

假设咱们的应用里须要显示一张尺寸很大的图片，位于远端服务器。咱们用一些前端框架的Image这个控件类去显示图片。若是直接调用控件类的代码

image.setSrc("http://www.bigfile.gif"), 那么在这张具体的图片真正加载到本地以前，UI上显示一片空白，这个用户体验很差。

咱们平常生活中其实已经能感受到，不少优秀的前端应用，在加载大尺寸图片或者执行其余费时的后台操做时，前台都会有一些动画效果。

今天咱们就来动手作一个相似的效果出来。

有一个按钮。点了以后，会触发一张大尺寸图片的加载。

在这张图片的加载过程当中，一直显示一张本地的gif图片做为加载动画：

加载完毕后，动画消失，实际图片才显示出来（4.1MB大）。

项目完整代码在我github上：

https://github.com/i042416/FioriODataTestTool2014/tree/master/WebContent/buttontutorial/view

看一些关键步骤。

1. Image控件定义在XML视图里，ID为jerryImage。我用的SAP UI5前端框架。你们只要领会了思路，能够容易地迁移到其余任何前端框架去。

id为jerryButton的button控件，点击事件处理函数onPress：

2. 再看控制器的代码：onPress执行loadImageWithProxy。

loadImageWithProxy调用injectProxy，传入的输入参数image就是XML视图里定义的Image控件。

在injectProxy里，代码第30行建立了一个隐藏的Image代理对象，而后在第36行用真实的Image控件去显示本地的gif文件，以在UI上显示出动画效果，而后第37行用隐藏的Image代理对象去悄悄地加载大尺寸文件，这件事情终端用户并不知情。等到这个大尺寸图片加载完毕后，Image代理对象的onload回调函数会被浏览器触发，此时再让真实的Image控件把加载好的大尺寸文件显示出来。 效果就实现了。

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码: