这篇文章介绍一种使用代理设计模式（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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

巧用代理设计模式(Proxy Design Pattern)改善前端图片加载体验的更多相关文章

  1. Java代理设计模式(Proxy)的四种具体实现：静态代理和动态代理

    面试问题:Java里的代理设计模式(Proxy Design Pattern)一共有几种实现方式?这个题目很像孔乙己问"茴香豆的茴字有哪几种写法?" 所谓代理模式,是指客户端(Cl ...

  2. java设计模式大全 Design pattern samples in Java(最经典最全的资料)

    java设计模式大全 Design pattern samples in Java(最经典最全的资料) 2015年06月19日 13:10:58 阅读数:11100 Design pattern sa ...

  3. php代理模式(proxy design)

    结构模式最后一个,接着进入行为模式. <?php /* The proxy design pattern functions as an interface to an original obj ...

  4. Proxy Design Pattern 代理设计模式

    代理设计模式.此模式是用于serverclient排序.互联网接入,也经常使用的类代理,我觉得这种感觉很复杂.但是,这种设计模式本身是非常easy的. 是一类调用另一个类的功能.客户调用类,实际工作是 ...

  5. Java代理设计模式(Proxy)的几种具体实现

    Proxy是一种结构设计模型,主要解决对象直接访问带来的问题,代理又分为静态代理和动态代理(JDK代理.CGLIB代理. 静态代理:又程序创建的代理类,或者特定的工具类,在平时开发中经常用到这种代理模 ...

  6. 软件设计模式（Design pattern）（待续）

    软件设计模式是在面向对象的系统设计过程中反复出现的问题解决方案. 设计模式通常描述了一组相互紧密作用的类与对象. 设计模式提供一种讨论软件设计的公共语言,使得熟练设计者的设计经验可以被初学者和其他设计 ...

  7. 设计模式(十三)：从“FQ”中来认识代理模式(Proxy Pattern)

    我们知道Google早就被墙了,所以FQ才能访问Google呢,这个“FQ”的过程就是一个代理的过程.“代理模式”在之前的博客中不止一次的提及过,之前的委托回调就是代理模式的具体应用.今天我们就从“F ...

  8. 说说设计模式~大话目录(Design Pattern)

    回到占占推荐博客索引 设计模式(Design pattern)与其它知识不同,它没有华丽的外表,没有吸引人的工具去实现,它是一种心法,一种内功,如果你希望在软件开发领域有一种新的突破,一个质的飞越,那 ...

  9. 设计模式(Design Pattern)系列之.NET专题

    最近,不是特别忙,重新翻了下设计模式,特地在此记录一下.会不定期更新本系列专题文章. 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结. 使用 ...

随机推荐

  1. Web 字体的选择和运用

    首先来看一则设计师和前端小白的日常,这是使用 Mac OS 的设计师给的效果图 这是使用 Windows 开发的实际产品页面 我跟你们说,设定字体要按照基本法! (PS: 以上截图不代表网站真实面貌, ...

  2. matlab新手入门（二）（翻译）

    矩阵和数组 MATLAB是“矩阵实验室”的缩写.虽然其他编程语言大多数一次使用数字,但MATLAB®主要用于整个矩阵和数组.所有MATLAB变量都是多维数组,无论数据类型如何.矩阵是通常用于线性代数的 ...

  3. 使用CTE生成辅助表(数字或时间)等

    数字辅助表: , ;WITH Digital_Rangs(Digital) AS ( SELECT @start_digital UNION ALL FROM [Digital_Rangs] WHER ...

  4. 编写BeanFactory

    /** * 一个创建Bean对象的工厂 * * Bean:在计算机英语中,有可重用组件的含义. * JavaBean:用java语言编写的可重用组件. * javabean > 实体类 * * ...

  5. MapReduce编程模型

    # 文本前期处理 strl_ist = str.replace('\n', '').lower().split(' ') count_dict = {} # 如果字典里有该单词则加 1,否则添加入字典 ...

  6. HyperLedger Fabric 多机部署(二)

    启动各个节点: ./orderer order节点启动方式 ./peer node start peer节点启动方式 Admin@org1.example.com 使用hyperledger fabr ...

  7. oracle 查看 job 日志

    select * from user_scheduler_job_log select * from user_scheduler_job_run_details select *  from use ...

  8. 《SQL 进阶教程》 case:将已有编号方式转换为新的方式并统计

    SQL 权威指南SQL 解惑在进行非定制化统计时,需要将已有编号方式转换为另外一种便于分析的方式进行统计需求 select case when name='哈尔滨' then '黑龙江' when n ...

  9. Jmeter—生成excel结果文件

    相信很多用jmeter进行接口测试的童鞋都会有这样的苦恼:同时执行上百条测试案例,如何能轻松加愉快地检查案例输出结果?仅仅靠jmeter的断言.debug sampler.察看结果树等是无法满足我们要 ...

  10. ES6新特性使用小结（二）

    六.Array 扩展 /* * Array Api Array.of 数组的构建 * */ { let arr = Array.of(, , , , , ); console.log(arr); // ...