使用代理模式改善SAP UI5應用的圖片載入體驗
For training purpose I am already implemented samples of various variants of proxy design pattern implementation in ABAP and Java. And now I need to find a meaningful example for proxy pattern used in JavaScript.
Let’s review the concept of proxy pattern in Wikipedia:
“A proxy, in its most general form, is a class functioning as an interface to something else. The proxy could interface to anything: a network connection, a large object in memory, a file, or some other resource that is expensive or impossible to duplicate. In short, a proxy is a wrapper or agent object that is being called by the client to access the real serving object behind the scenes. Use of the proxy can simply be forwarding to the real object, or can provide additional logic. In the proxy extra functionality can be provided, for example caching when operations on the real object are resource intensive, or checking preconditions before operations on the real object are invoked. For the client, usage of a proxy object is similar to using the real object, because both implement the same interface.“ Let’s use a real case to illustrate its usage.
Normal Solution
I have an XML view which contains one Image control:
<core:View xmlns:core="sap.ui.core" xmlns:common="sap.ui.commons" controllerName="buttontutorial.view.simple">
<common:Button text="Load Image" id="jerryButton" press="onPress"/>
<common:Image id="jerryImage"
height="400px"
width="400px"/></core:View>
And implement it in my controller.
sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller){
"use strict";
return Controller.extend("buttontutorial.view.simple",{
BIG_IMAGE: "
onPress: function(){
var image = this.byId("jerryImage");
this.loadImageNormal(image);
},
loadImageNormal: function(image){
image.setSrc(this.BIG_IMAGE);
}
});
});
Nothing special. The drawback of this solution is, when you try to load a big image file, only a fragment of image is displayed first and then accompanied with the left part gradually.
Proxy Solution
New source code of controller:
sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller){
"use strict";
return Controller.extend("buttontutorial.view.simple",{
BIG_IMAGE: "
onPress: function(){
var image = this.byId("jerryImage");
this.loadImageWithProxy(image);
},
injectProxy: (function(){
var imgProxy = new Image();
return function(img, src){
imgProxy.onload = function(){
img.setSrc(this.src);
};
img.setSrc("buttontutorial/view/loading.gif");
imgProxy.src = this.BIG_IMAGE;
};
})(),
loadImageWithProxy: function(image){
this.injectProxy(image);
}
});
});
In this solution, once button is pressed:
(1) a local animation gif will be displayed as loading indicator. (2) At the same time, a proxy Image instance is created which issues the load of the big file in secret. (3) When the loading of big file is finished, the onload callback is called, and only at this time the image control defined in xml view itself could display the completely loaded image file.
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2723714/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- SAP UI5 應用如何載入自定義 ThemeUI
- SAP UI5 應用 XML 檢視的載入邏輯分析UIXML
- Fresco圖片載入的簡單應用
- 使用 http-proxy 代理 SAP UI5 應用發起的 HTTP 請求HTTPUI
- 漸進式圖片載入:提升前端使用者體驗的藝術前端
- SAP UI5應用入口App.controller.js是如何被UI5框架載入的?UIAPPControllerJS框架
- SAP UI5 應用中的 sap.ui.require 使用場景UI
- 使用SAP WebIDE給SAP UI5應用新增data sourceWebIDEUI
- 使用 SAP UI5 CLI 命令列工具構建和執行 SAP UI5 應用UI命令列
- SAP UI5 應用中的 sap.ui.require.toUrl 使用場景UI
- SAP UI5 應用 index.html 裡定義的 data-sap-ui-theme 值的載入原理UIIndexHTML
- HTML使用canvas載入圖片HTMLCanvas
- Android圖片載入記憶體佔用分析Android記憶體
- SAP UI5 sap-ui-core.js的載入邏輯UIJS
- 使用 TypeScript 編寫 SAP UI5 應用的準備工作TypeScriptUI
- 把 SAP UI5 應用部署到 SAP KymaUI
- Android應用開發-圖片載入庫GlideAndroidIDE
- SAP UI5 應用開發教程之四十五 - 如何在 SAP UI5 應用裡使用 jQuery 和原生的 DOM APIUIjQueryAPI
- Flutter 入門與實戰(七):使用 cached_image_network 優化圖片載入體驗Flutter優化
- 詳談高大上的圖片載入框架Glide -應用篇框架IDE
- SAP UI5 Web Component for React的圖示和圖片處理UIWebReact
- SAP UI5 應用開發教程之五十九 - 如何在 SAP UI5 應用裡顯示世界地圖試讀版UI地圖
- 使用SAP UI5 Web Components開發React應用UIWebReact
- 使用 yo 命令列嚮導建立 SAP UI5 應用命令列UI
- 使用 SAP Fiori Tools 自帶的代理伺服器解決本地執行的 SAP UI5 應用遇到的跨域問題伺服器UI跨域
- SAP UI5應用裡的列表處理UI
- 代理模式+react+ 圖片佔點陣圖模式React
- SAP UI5 應用的 Component.js 檔案是如何在執行時被載入的?UIJS
- 在 SAP BAS 裡使用 SAP UI5 應用消費 OData 的 Create 和 Delete 操作UIdelete
- SAP UI5 應用開發教程之一百零六 - 如何提高 SAP UI5 應用路由 url 的可讀性UI路由
- win10應用商店載入不出圖片如何解決_win10商店圖片載入不出來恢復方法Win10
- 如何改善應用啟動效能 | Facebook 應用的經驗分享
- AlamofireImage 使用 – swift載入網路圖片,縮放圖片,生成圓形圖片Swift
- Flutter 圖片載入Flutter
- 圖片懶載入
- 預載入圖片
- 圖片載入事件事件
- 載入圖片方式