这篇文章介绍一种使用代理设计模式（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. error: field has incomplete type

    在头文件使用某一自定义的类的指针或引用时,只需要前置声明该类即可,然而如果该类中有静态成员时,必须包含该类的头文件,而不是使用前置声明．

  2. linux下libphenom的测试代码

    使用说明:测试使用libphenom库的字符串追加函数,效率是strcat的60多倍.所以在进行大量的字符串累加的时候可以考虑使用libphenom库  依赖库: ck-.tar.gz cmake-. ...

  3. ios之CoreAnimation

    CoreAnimation的好处: 1.高性能,简单的编程模块 2.像View一样,使用层级结构来构建负责的界面 3.轻量级数据结构,能使上百个动画同时执行 4.抽象的动画接口,允许动画在一个独立的线 ...

  4. HTML页面弹出窗口调整代码总结

    弹出跟你当前的窗口有没有菜单工具栏没有关系,你只要在页面中写一个脚本它就弹出了.比如<a href=# onclick="window.open('xxx.aspx','窗口名称',' ...

  5. javascript数组对象

    constructor属性 返回数组对象原型 var arr = [1,2,3,4,5]; arr.constructor //输出 function Array() { [native code] ...

  6. HDU 1512 Monkey King (左偏树+并查集)

    题意:在一个森林里住着N(N<=10000)只猴子.在一开始,他们是互不认识的.但是随着时间的推移,猴子们少不了争斗,但那只会发生在互不认识 (认识具有传递性)的两只猴子之间.争斗时,两只猴子都 ...

  7. RobotFramework+selenium环境安装

    1.安装python 2.7.12 https://www.python.org/downloads/release/python-2712/ 安装完成之后配置好path,将下面的类似安装路径加入pa ...

  8. 【转】Js 数组转JSON格式

    要点1:转化函数 JSON.stringify() 要点2:在js里写数组的时候是var data = new Array() 但是你如果是要转json显示的时候就要写成 var data = {}, ...

  9. hiho week 136（二分＋优先队列）

    题目链接:http://hihocoder.com/contest/hiho136/problem/1 题意:中文题诶- 思路:直接对缓存区长度二分就好了,注意计算当前长度的"延迟惩罚值&q ...

  10. 图片旋转js代码

    function rotateImage(imgId) { imageToRotate = document.getElementById(imgId); imageToRotate.style.fi ...