巧用代理设计模式(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(构造器模式)
|
14天前
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
28 0
|
24天前
|
前端开发 应用服务中间件 API
"揭秘!面试官必问:你是如何巧妙绕过跨域难题的?前端代理VS服务器端CORS,哪个才是你的秘密武器?"
【8月更文挑战第21天】在软件开发中,尤其前后端分离架构下,跨域资源共享(CORS)是常见的挑战。主要解决方案有两种:一是服务器端配置CORS策略,通过设置响应头控制跨域访问权限,无需改动前端代码,增强安全性;二是前端代理转发,如使用Nginx或Webpack DevServer在开发环境中转发请求绕过同源策略,简化开发流程但不适用于生产环境。生产环境下应采用服务器端CORS策略以确保安全稳定。
25 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不用加