首页
登录 | 注册

巧用代理设计模式(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控件把加载好的大尺寸文件显示出来。 效果就实现了。



相关文章

  • 100行代码让您学会JavaScript原生的Proxy设计模式
    面向对象设计里的设计模式之Proxy(代理)模式,相信很多朋友已经很熟悉了.比如我之前写过代理模式在Java中实现的两篇文章: Java动态代理之InvocationHandler最简单的入门教程 下面的代码创建了一个名叫Jerry的Emp ...
  • Java动态代理之InvocationHandler最简单的入门教程
    public interface IHello { void sayHello(String name); void sayGoogBye(String name); } public class Helloimplements imple ...
  • 在.NET发展史中,2.0是具有里程碑意义的一个版本.从这个版本,.NET青出于蓝(Java),而胜于蓝.在.NET 2.0带来的诸多新特性中,我认为泛型是最重要,没有之一. 虽然泛型出现已有多年,连Java都早已借鉴引入了泛型(虽然是语法 ...
  • 什么是Java Marker Interface(标记接口)
    我们看Wikipedia里对标记接口的定义. 我试了下Google Translate翻译上面这段话,翻得很差劲,所以我来解释一下. 以Serializable接口为例.一个类实现了这个接口,说明它可以被序列化.因此,我们实际上通过Seri ...
  • Skr!纯前端控件集 WijmoJS 2018V2发布,在React、Vue和Angular中的更易用
    近日,WijmoJS 2018V2 正式发布,提供基于VSCode/在线Web设计器,可动态设计Web页面并生成代码,提供 SASS 支持,大幅提升控件集的稳定性和速度. WijmoJS设计器 – 无代码配置时代全面来临 l VSCode设 ...

2020 unjeep.com webmaster#unjeep.com
12 q. 0.014 s.
京ICP备10005923号