巧用代理設計模式(Proxy Design Pattern)改善前端圖片加載體驗

dackel 發布于2019-08-16 13:27 / 3655人閱讀

摘要：我們用一些前端框架的這個控件類去顯示圖片。如果直接調用控件類的代碼那么在這張具體的圖片真正加載到本地之前，上顯示一片空白，這個用戶體驗不好。

這篇文章介紹一種使用代理設計模式（Proxy Design Pattern）的方法來改善您的前端應用里圖片加載的體驗。

假設我們的應用里需要顯示一張尺寸很大的圖片，位于遠端服務器。我們用一些前端框架的Image這個控件類去顯示圖片。如果直接調用控件類的代碼

image.setSrc("http://www.bigfile.gif"), 那么在這張具體的圖片真正加載到本地之前，UI上顯示一片空白，這個用戶體驗不好。

我們日常生活中其實已經能感覺到，很多優秀的前端應用，在加載大尺寸圖片或者執行其他費時的后臺操作時，前臺都會有一些動畫效果。

今天我們就來動手做一個類似的效果出來。

有一個按鈕。點了之后，會觸發一張大尺寸圖片的加載。

在這張圖片的加載過程中，一直顯示一張本地的gif圖片作為加載動畫：

加載完畢后，動畫消失，實際圖片才顯示出來（4.1MB大）。

項目完整代碼在我github上：

https://github.com/i042416/Fi...

看一些關鍵步驟。

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的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/71778.html

巧用代理設計模式(Proxy Design Pattern)改善前端圖片加載體驗

摘要：我們用一些前端框架的這個控件類去顯示圖片。如果直接調用控件類的代碼那么在這張具體的圖片真正加載到本地之前，上顯示一片空白，這個用戶體驗不好。這篇文章介紹一種使用代理設計模式（Proxy Design Pattern）的方法來改善您的前端應用里圖片加載的體驗。假設我們的應用里需要顯示一張尺寸很大的圖片，位于遠端服務器。我們用一些前端框架的Image這個控件類去顯示圖片。如果直接調用控...

wenzi 2019-08-23 12:26 評論0 收藏0
100行代碼讓您學會JavaScript原生的Proxy設計模式

摘要：面向對象設計里的設計模式之代理模式，相信很多朋友已經很熟悉了。代表當前執行方法的實例，即方法調用者。代表具體的方法名稱。現在我們再次調用，傳入構造器返回的代理對象打印輸出，代理邏輯生效了和的一樣優雅地實現了代理設計模式。 showImg(https://segmentfault.com/img/remote/1460000016760603);面向對象設計里的設計模式之Proxy（代理...

txgcwm 2019-08-23 12:28 評論0 收藏0
Design Patterns - Proxy Pattern（譯）

摘要：在代理模式中，我們將創建一個對象，該對象在在接口中持有原始對象，以對外部提供它的功能。實現我們將創建一個接口并且創建具體類實現接口。原文鏈接譯者：smallclover希望對你們有所幫助，謝謝閱讀！設計模式-代理模式在代理模式中，我們使用一個類來代表另一個類的功能。這種類型的設計模式屬于結構型設計模式的一種。在代理模式中，我們將創建一個對象，該對象在在接口中持有原始對象，以對外部...

mtunique 2019-08-14 15:36 評論0 收藏0
JavaScript系列（四） - 收藏集 - 掘金

摘要：函數式編程前端掘金引言面向對象編程一直以來都是中的主導范式。函數式編程是一種強調減少對程序外部狀態產生改變的方式。 JavaScript 函數式編程 - 前端 - 掘金引言面向對象編程一直以來都是JavaScript中的主導范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數式編程越來越多得受到開發者的青睞。函數式編程是一種強調減少對程序外部狀態產生改變的方式。因此，...

cfanr 2019-08-20 16:33 評論0 收藏0
[譯] 如何運用新技術提升網頁速度和性能

摘要：簡言之，我們認為好的用戶體驗從快速的內容傳輸開始，也就意味著性能美觀。每一步我們都在探討如何在獲得好的用戶體驗和保證設計美感的同時，最小化對性能的影響。字型子集設定到目前為止，子集設定是改善網頁字體性能最快的方式。作者 Declan 原文鏈接最近更新了我們的網站，它是經過了設計上的全面驗收的。但實際上，作為軟件開發者，我們會注重很多技術相關的零碎的東西。我們的目標是控制性能，注重性...

zhoutk 2019-08-29 11:11 評論0 收藏0