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

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

代理模式(Proxy Design Pattern)及代码实现
什么是代理模式? 代理模式通过名字得知, 是提供一个第三方服务给客户端使用,这个第三方服务对接真实服务,并且实现了真实服务功能,并且还增加了额外的功能; 生活中的例子 123 ...
Java代理设计模式(Proxy)的四种具体实现：静态代理和动态代理
面试问题:Java里的代理设计模式(Proxy Design Pattern)一共有几种实现方式?这个题目很像孔乙己问"茴香豆的茴字有哪几种写法?" 所谓代理模式,是指客户端(Cl ...
设计模式（Design Pattern）
简介设计模式(Design Pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用.设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案.这些解决方案是众多软件开发人 ...
Java代理设计模式(Proxy)的具体实现：静态代理和动态代理
Java代理设计模式(Proxy)的具体实现:静态代理和动态代理实现方式一:静态代理静态代理方式的优点静态代理方式的缺点 Java动态代理实现方式一:InvocationHandler Java ...
几种常用的设计模式（Design Pattern)
文章目录设计模式(Design Pattern) 一.设计模式的分类 1. 基础型模式 (Fundamental Pattern) 2. 创建型模式 (Creational Pattern) 3. ...
设计模式（Design pattern—
设计模式(Design Pattern)系列视频教程(附PDF文档) 设计模式(Design pattern-使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式 ...
C# 版本设计模式（Design Pattern）(转)
C# 版本设计模式(Design Pattern)---------------总序今天在写代码的时候,突然想到了一个非常有趣的问题,就是非常经典的一个问题:猫叫了,老师跑了,主人醒了. 也不知道自 ...
初读设计模式-----《design pattern explained》读后感
从网上淘来了一本<design pattern explained>,用了半个月的时间细细的读完了这本书. 本打算单单的从技术角度进行总结的,但是却全然没有头绪.说说自己的粗浅的感悟吧.. ...
proxy connect abort处理方法_Java代理设计模式(Proxy)的几种具体实现
Proxy是一种结构设计模型,主要解决对象直接访问带来的问题,代理又分为静态代理和动态代理(JDK代理.CGLIB代理. 静态代理:又程序创建的代理类,或者特定的工具类,在平时开发中经常用到这种代理模 ...

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

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

最新文章

热门文章