資訊專欄INFORMATION COLUMN
摘要：我們用一些前端框架的這個(gè)控件類去顯示圖片。如果直接調(diào)用控件類的代碼那么在這張具體的圖片真正加載到本地之前，上顯示一片空白，這個(gè)用戶體驗(yàn)不好。
這篇文章介紹一種使用代理設(shè)計(jì)模式（Proxy Design Pattern）的方法來改善您的前端應(yīng)用里圖片加載的體驗(yàn)。
假設(shè)我們的應(yīng)用里需要顯示一張尺寸很大的圖片，位于遠(yuǎn)端服務(wù)器。我們用一些前端框架的Image這個(gè)控件類去顯示圖片。如果直接調(diào)用控件類的代碼
image.setSrc("http://www.bigfile.gif"), 那么在這張具體的圖片真正加載到本地之前，UI上顯示一片空白，這個(gè)用戶體驗(yàn)不好。
我們?nèi)粘Ｉ钪衅鋵?shí)已經(jīng)能感覺到，很多優(yōu)秀的前端應(yīng)用，在加載大尺寸圖片或者執(zhí)行其他費(fèi)時(shí)的后臺(tái)操作時(shí)，前臺(tái)都會(huì)有一些動(dòng)畫效果。
今天我們就來動(dòng)手做一個(gè)類似的效果出來。
有一個(gè)按鈕。點(diǎn)了之后，會(huì)觸發(fā)一張大尺寸圖片的加載。
在這張圖片的加載過程中，一直顯示一張本地的gif圖片作為加載動(dòng)畫：
加載完畢后，動(dòng)畫消失，實(shí)際圖片才顯示出來（4.1MB大）。
項(xiàng)目完整代碼在我github上：
https://github.com/i042416/Fi...
看一些關(guān)鍵步驟。
1. Image控件定義在XML視圖里，ID為jerryImage。我用的SAP UI5前端框架。大家只要領(lǐng)會(huì)了思路，可以容易地遷移到其他任何前端框架去。
id為jerryButton的button控件，點(diǎn)擊事件處理函數(shù)onPress：
2. 再看控制器的代碼：onPress執(zhí)行l(wèi)oadImageWithProxy。
loadImageWithProxy調(diào)用injectProxy，傳入的輸入?yún)?shù)image就是XML視圖里定義的Image控件。
在injectProxy里，代碼第30行創(chuàng)建了一個(gè)隱藏的Image代理對(duì)象，然后在第36行用真實(shí)的Image控件去顯示本地的gif文件，以在UI上顯示出動(dòng)畫效果，然后第37行用隱藏的Image代理對(duì)象去悄悄地加載大尺寸文件，這件事情終端用戶并不知情。等到這個(gè)大尺寸圖片加載完畢后，Image代理對(duì)象的onload回調(diào)函數(shù)會(huì)被瀏覽器觸發(fā)，此時(shí)再讓真實(shí)的Image控件把加載好的大尺寸文件顯示出來。 效果就實(shí)現(xiàn)了。
要獲取更多Jerry的原創(chuàng)技術(shù)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙"或者掃描下面二維碼:
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/71778.html
摘要：我們用一些前端框架的這個(gè)控件類去顯示圖片。如果直接調(diào)用控件類的代碼那么在這張具體的圖片真正加載到本地之前，上顯示一片空白，這個(gè)用戶體驗(yàn)不好。 這篇文章介紹一種使用代理設(shè)計(jì)模式（Proxy Design Pattern）的方法來改善您的前端應(yīng)用里圖片加載的體驗(yàn)。 假設(shè)我們的應(yīng)用里需要顯示一張尺寸很大的圖片，位于遠(yuǎn)端服務(wù)器。我們用一些前端框架的Image這個(gè)控件類去顯示圖片。如果直接調(diào)用控...
摘要：面向?qū)ο笤O(shè)計(jì)里的設(shè)計(jì)模式之代理模式，相信很多朋友已經(jīng)很熟悉了。代表當(dāng)前執(zhí)行方法的實(shí)例，即方法調(diào)用者。代表具體的方法名稱。現(xiàn)在我們?cè)俅握{(diào)用，傳入構(gòu)造器返回的代理對(duì)象打印輸出，代理邏輯生效了和的一樣優(yōu)雅地實(shí)現(xiàn)了代理設(shè)計(jì)模式。 showImg(https://segmentfault.com/img/remote/1460000016760603);面向?qū)ο笤O(shè)計(jì)里的設(shè)計(jì)模式之Proxy（代理...
摘要：在代理模式中，我們將創(chuàng)建一個(gè)對(duì)象，該對(duì)象在在接口中持有原始對(duì)象，以對(duì)外部提供它的功能。實(shí)現(xiàn)我們將創(chuàng)建一個(gè)接口并且創(chuàng)建具體類實(shí)現(xiàn)接口。 原文鏈接譯者：smallclover希望對(duì)你們有所幫助，謝謝閱讀！ 設(shè)計(jì)模式-代理模式 在代理模式中，我們使用一個(gè)類來代表另一個(gè)類的功能。這種類型的設(shè)計(jì)模式屬于結(jié)構(gòu)型設(shè)計(jì)模式的一種。在代理模式中，我們將創(chuàng)建一個(gè)對(duì)象，該對(duì)象在在接口中持有原始對(duì)象，以對(duì)外部...
摘要：函數(shù)式編程前端掘金引言面向?qū)ο缶幊桃恢币詠矶际侵械闹鲗?dǎo)范式。函數(shù)式編程是一種強(qiáng)調(diào)減少對(duì)程序外部狀態(tài)產(chǎn)生改變的方式。 JavaScript 函數(shù)式編程 - 前端 - 掘金引言 面向?qū)ο缶幊桃恢币詠矶际荍avaScript中的主導(dǎo)范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數(shù)式編程越來越多得受到開發(fā)者的青睞。函數(shù)式編程是一種強(qiáng)調(diào)減少對(duì)程序外部狀態(tài)產(chǎn)生改變的方式。因此，...
摘要：簡(jiǎn)言之，我們認(rèn)為好的用戶體驗(yàn)從快速的內(nèi)容傳輸開始，也就意味著性能美觀。每一步我們都在探討如何在獲得好的用戶體驗(yàn)和保證設(shè)計(jì)美感的同時(shí)，最小化對(duì)性能的影響。字型子集設(shè)定到目前為止，子集設(shè)定是改善網(wǎng)頁字體性能最快的方式。 作者 Declan 原文鏈接 最近更新了我們的網(wǎng)站，它是經(jīng)過了設(shè)計(jì)上的全面驗(yàn)收的。但實(shí)際上，作為軟件開發(fā)者，我們會(huì)注重很多技術(shù)相關(guān)的零碎的東西。我們的目標(biāo)是控制性能，注重性...
閱讀 1170·2021-10-20 13:48
閱讀 2195·2021-09-30 09:47
閱讀 3107·2021-09-28 09:36
閱讀 2348·2019-08-30 15:56
閱讀 1201·2019-08-30 15:52
閱讀 2025·2019-08-30 10:48
閱讀 611·2019-08-29 15:04
閱讀 573·2019-08-29 12:54
