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


相关文章
|
4月前
|
设计模式 Java
【设计模式】JAVA Design Patterns——Bridge(桥接模式)
【设计模式】JAVA Design Patterns——Bridge(桥接模式)
【设计模式】JAVA Design Patterns——Bridge(桥接模式)
|
4月前
|
设计模式 Java API
【设计模式】JAVA Design Patterns——Combinator(功能模式)
【设计模式】JAVA Design Patterns——Combinator(功能模式)
|
4月前
|
设计模式 监控 Java
【设计模式】JAVA Design Patterns——Circuit Breaker(断路器模式)
【设计模式】JAVA Design Patterns——Circuit Breaker(断路器模式)
|
4月前
|
设计模式 Java 程序员
【设计模式】JAVA Design Patterns——Bytecode(字节码模式)
【设计模式】JAVA Design Patterns——Bytecode(字节码模式)
|
4月前
|
设计模式 算法 Java
【设计模式】JAVA Design Patterns——Builder(构造器模式)
【设计模式】JAVA Design Patterns——Builder(构造器模式)
|
4月前
|
设计模式 Java 容器
【设计模式】JAVA Design Patterns——Async Method Invocation(异步方法调用模式)
【设计模式】JAVA Design Patterns——Async Method Invocation(异步方法调用模式)
|
10天前
|
前端开发 应用服务中间件 API
"揭秘!面试官必问:你是如何巧妙绕过跨域难题的?前端代理VS服务器端CORS,哪个才是你的秘密武器?"
【8月更文挑战第21天】在软件开发中,尤其前后端分离架构下,跨域资源共享(CORS)是常见的挑战。主要解决方案有两种:一是服务器端配置CORS策略,通过设置响应头控制跨域访问权限,无需改动前端代码,增强安全性;二是前端代理转发,如使用Nginx或Webpack DevServer在开发环境中转发请求绕过同源策略,简化开发流程但不适用于生产环境。生产环境下应采用服务器端CORS策略以确保安全稳定。
19 0
|
2月前
|
前端开发 应用服务中间件 nginx
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
|
4月前
|
设计模式 Java 数据库
【设计模式】JAVA Design Patterns——Converter(转换器模式)
转换器模式旨在实现不同类型间的双向转换,减少样板代码。它通过通用的Converter类和特定的转换器(如UserConverter)简化实例映射。Converter类包含两个Function对象,用于不同类型的转换,同时提供列表转换方法。当需要在逻辑上对应的类型间转换,或处理DTO、DO时,此模式尤为适用。
【设计模式】JAVA Design Patterns——Converter(转换器模式)
|
2月前
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
下一篇
云函数