摘要：我们用一些前端框架的这个控件类去显示图片。如果直接调用控件类的代码那么在这张具体的图片真正加载到本地之前，上显示一片空白，这个用户体验不好。
这篇文章介绍一种使用代理设计模式（Proxy Design Pattern）的方法来改善您的前端应用里图片加载的体验。
假设我们的应用里需要显示一张尺寸很大的图片，位于远端服务器。我们用一些前端框架的Image这个控件类去显示图片。如果直接调用控件类的代码
image.setSrc("http://www.bigfile.gif"), 那么在这张具体的图片真正加载到本地之前，UI上显示一片空白，这个用户体验不好。
我们日常生活中其实已经能感觉到，很多优秀的前端应用，在加载大尺寸图片或者执行其他费时的后台操作时，前台都会有一些动画效果。
今天我们就来动手做一个类似的效果出来。
有一个按钮。点了之后，会触发一张大尺寸图片的加载。
在这张图片的加载过程中，一直显示一张本地的gif图片作为加载动画：
加载完毕后，动画消失，实际图片才显示出来（4.1MB大）。
项目完整代码在我github上：
https://github.com/i042416/Fi...
看一些关键步骤。
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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/71778.html
摘要：我们用一些前端框架的这个控件类去显示图片。如果直接调用控件类的代码那么在这张具体的图片真正加载到本地之前，上显示一片空白，这个用户体验不好。 这篇文章介绍一种使用代理设计模式（Proxy Design Pattern）的方法来改善您的前端应用里图片加载的体验。 假设我们的应用里需要显示一张尺寸很大的图片，位于远端服务器。我们用一些前端框架的Image这个控件类去显示图片。如果直接调用控...
摘要：面向对象设计里的设计模式之代理模式，相信很多朋友已经很熟悉了。代表当前执行方法的实例，即方法调用者。代表具体的方法名称。现在我们再次调用，传入构造器返回的代理对象打印输出，代理逻辑生效了和的一样优雅地实现了代理设计模式。 showImg(https://segmentfault.com/img/remote/1460000016760603);面向对象设计里的设计模式之Proxy（代理...
摘要：在代理模式中，我们将创建一个对象，该对象在在接口中持有原始对象，以对外部提供它的功能。实现我们将创建一个接口并且创建具体类实现接口。 原文链接译者：smallclover希望对你们有所帮助，谢谢阅读！ 设计模式-代理模式 在代理模式中，我们使用一个类来代表另一个类的功能。这种类型的设计模式属于结构型设计模式的一种。在代理模式中，我们将创建一个对象，该对象在在接口中持有原始对象，以对外部...
摘要：函数式编程前端掘金引言面向对象编程一直以来都是中的主导范式。函数式编程是一种强调减少对程序外部状态产生改变的方式。 JavaScript 函数式编程 - 前端 - 掘金引言 面向对象编程一直以来都是JavaScript中的主导范式。JavaScript作为一门多范式编程语言，然而，近几年，函数式编程越来越多得受到开发者的青睐。函数式编程是一种强调减少对程序外部状态产生改变的方式。因此，...
摘要：简言之，我们认为好的用户体验从快速的内容传输开始，也就意味着性能美观。每一步我们都在探讨如何在获得好的用户体验和保证设计美感的同时，最小化对性能的影响。字型子集设定到目前为止，子集设定是改善网页字体性能最快的方式。 作者 Declan 原文链接 最近更新了我们的网站，它是经过了设计上的全面验收的。但实际上，作为软件开发者，我们会注重很多技术相关的零碎的东西。我们的目标是控制性能，注重性...
阅读 1166·2021-10-20 13:48
阅读 2173·2021-09-30 09:47
阅读 3103·2021-09-28 09:36
阅读 2341·2019-08-30 15:56
阅读 1195·2019-08-30 15:52
阅读 2019·2019-08-30 10:48
阅读 606·2019-08-29 15:04
阅读 564·2019-08-29 12:54
