這篇文章介紹一種使用代理設計模式（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：
. 再看控制器的代碼：onPress執行loadImageWithProxy。
oadImageWithProxy調用injectProxy，傳入的輸入參數image就是XML視圖裡定義的Image控件。
在injectProxy裡，代碼第30行建立了一個隐藏的Image代理對象，然後在第36行用真實的Image控件去顯示本地的gif檔案，以在UI上顯示出動畫效果，然後第37行用隐藏的Image代理對象去悄悄地加載大尺寸檔案，這件事情終端使用者并不知情。等到這個大尺寸圖檔加載完畢後，Image代理對象的onload回調函數會被浏覽器觸發，此時再讓真實的Image控件把加載好的大尺寸檔案顯示出來。 效果就實作了。