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

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

这篇文章介绍一种使用代理设计模式(Proxy Design Pattern)的方法来改善您的前端应用里图片加载的体验。


假设我们的应用里需要显示一张尺寸很大的图片,位于远端服务器。我们用一些前端框架的Image这个控件类去显示图片。如果直接调用控件类的代码


image.setSrc(“http://www.bigfile.gif”), 那么在这张具体的图片真正加载到本地之前,UI上显示一片空白,这个用户体验不好。


我们日常生活中其实已经能感觉到,很多优秀的前端应用,在加载大尺寸图片或者执行其他费时的后台操作时,前台都会有一些动画效果。


今天我们就来动手做一个类似的效果出来。


有一个按钮。点了之后,会触发一张大尺寸图片的加载。


image.png


在这张图片的加载过程中,一直显示一张本地的gif图片作为加载动画:


image.png


加载完毕后,动画消失,实际图片才显示出来(4.1MB大)。


image.png


项目完整代码在我github上:


https://github.com/i042416/FioriODataTestTool2014/tree/master/WebContent/buttontutorial/view


看一些关键步骤。


1. Image控件定义在XML视图里,ID为jerryImage。我用的SAP UI5前端框架。大家只要领会了思路,可以容易地迁移到其他任何前端框架去。


id为jerryButton的button控件,点击事件处理函数onPress:


image.png


2. 再看控制器的代码:onPress执行loadImageWithProxy。



image.png

loadImageWithProxy调用injectProxy,传入的输入参数image就是XML视图里定义的Image控件。

image.png



在injectProxy里,代码第30行创建了一个隐藏的Image代理对象,然后在第36行用真实的Image控件去显示本地的gif文件,以在UI上显示出动画效果,然后第37行用隐藏的Image代理对象去悄悄地加载大尺寸文件,这件事情终端用户并不知情。等到这个大尺寸图片加载完毕后,Image代理对象的onload回调函数会被浏览器触发,此时再让真实的Image控件把加载好的大尺寸文件显示出来。 效果就实现了。


相关文章
|
24天前
|
设计模式 Java
【设计模式】JAVA Design Patterns——Bridge(桥接模式)
【设计模式】JAVA Design Patterns——Bridge(桥接模式)
【设计模式】JAVA Design Patterns——Bridge(桥接模式)
|
23天前
|
设计模式 Java API
【设计模式】JAVA Design Patterns——Combinator(功能模式)
【设计模式】JAVA Design Patterns——Combinator(功能模式)
|
24天前
|
设计模式 监控 Java
【设计模式】JAVA Design Patterns——Circuit Breaker(断路器模式)
【设计模式】JAVA Design Patterns——Circuit Breaker(断路器模式)
|
24天前
|
设计模式 Java 程序员
【设计模式】JAVA Design Patterns——Bytecode(字节码模式)
【设计模式】JAVA Design Patterns——Bytecode(字节码模式)
|
24天前
|
设计模式 算法 Java
【设计模式】JAVA Design Patterns——Builder(构造器模式)
【设计模式】JAVA Design Patterns——Builder(构造器模式)
|
24天前
|
设计模式 Java 容器
【设计模式】JAVA Design Patterns——Async Method Invocation(异步方法调用模式)
【设计模式】JAVA Design Patterns——Async Method Invocation(异步方法调用模式)
|
24天前
|
设计模式 Java API
【设计模式】JAVA Design Patterns——Aggregator Microservices(聚合器微服务模式)
【设计模式】JAVA Design Patterns——Aggregator Microservices(聚合器微服务模式)
|
24天前
|
设计模式 Java
【设计模式】JAVA Design Patterns——Adapter(适配器模式)
【设计模式】JAVA Design Patterns——Adapter(适配器模式)
|
24天前
|
设计模式 算法 Java
【设计模式】JAVA Design Patterns——Acyclic Visitor(非循环访问者模式)
【设计模式】JAVA Design Patterns——Acyclic Visitor(非循环访问者模式)
|
19天前
|
设计模式 安全 Java
【设计模式】JAVA Design Patterns——Curiously Recurring Template Pattern(奇异递归模板模式)
该文介绍了一种C++的编程技巧——奇异递归模板模式(CRTP),旨在让派生组件能继承基本组件的特定功能。通过示例展示了如何创建一个`Fighter`接口和`MmaFighter`类,其中`MmaFighter`及其子类如`MmaBantamweightFighter`和`MmaHeavyweightFighter`强制类型安全,确保相同重量级的拳手之间才能进行比赛。这种设计避免了不同重量级拳手间的错误匹配,编译时会报错。CRTP适用于处理类型冲突、参数化类方法和限制方法只对相同类型实例生效的情况。
【设计模式】JAVA Design Patterns——Curiously Recurring Template Pattern(奇异递归模板模式)