這篇文章介紹一種使用代理設計模式（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控件把加載好的大尺寸文件顯示出來。 效果就實現了。

要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:

總結

以上是生活随笔為你收集整理的巧用代理设计模式(Proxy Design Pattern)改善前端图片加载体验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。