这篇文章介绍一种使用代理设计模式（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. SynEdit(Delphi XE7)的安装和基本使用

    一.花絮 delphi自带的memo显示sql语句看的太累人了,今天决定美化一下.最起码要有“语法着色”.“显示行号”这2个功能. 意外发现了 SynEdit 控件. SynEdit是一个免费的文字编 ...

  2. java的try后面跟括号

    例子: try (FileReader reader = new FileReader("data.txt")) { ... }catch (IOException io) { . ...

  3. day9http协议

    Http协议入门 2.1 什么是http协议 http协议: 对浏览器客户端 和  服务器端 之间数据传输的格式规范 2.2 查看http协议的工具 1)使用火狐的firebug插件(右键->f ...

  4. day4 DOM，BOM

    1.     BOM编程 1.1. BOM编程基础 全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行ja ...

  5. Apt本地源制作

    方法一 缓存deb包 # apt install XXX # mkdir -p /usr/local/mydebs # find /var/cache/apt/archives/ -name *.de ...

  6. MySQL查看版本号的五种方式介绍1111111

    MySQL查看版本号的五种方式介绍 1 命令行模式登录MySQL [root@localhost ~]# mysql -uroot -p Enter password: Welcome to the ...

  7. Python学习笔记(字典）

    今天学习一个python中的基本类型--字典(dictionary) 字典这种数据结构有点像我们平常用的通讯录,有一个名字和这个名字对应的信息.在字典中,名字叫做“键”,对应的内容信息叫做“值”.字典 ...

  8. C 语言实例 - 判断正数/负数

    C 语言实例 - 判断正数/负数 用户输入一个数字,判断该数字是正数还是负数或是零. 实例 #include <stdio.h> int main() { double number; p ...

  9. ES6入门教程---变量和常量

    ES6提出了两个新的声明变量的命令:let 和 const 1. 建议不再使用var,而使用let 和const .优先使用const. 在定义之后值是固定不变的,即为常量 常量的值不能修改,但是如果 ...

  10. 补充:jQuery的ajax

    一.jQuery的ajax 什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJA ...