外部圖床基本設定

Jerry Kitty Hsu
Axure Geek
Published in
3 min readMar 30, 2018

AxureRP 在線上做展示其實是大部分 PM 共享文件的好方法,但若是遇到高擬真效果的網站或是頁面展示,往往會遇到網頁為了 Load 圖而體驗很差的狀況,本篇教學可以解決以下幾種狀況

● 解決axshare網站效能問題

● 圖片外連設定

圖片外連解決網站資源問題

首先如何使用外連圖床,本教學使用 Flickr 作為外連圖床,好處是容量大照片好整理而且免費

  1. 這次使用的範例圖檔大小為 6000*3376,上傳圖檔完成後右下角有分享按鈕,點擊後選擇 BBCode 會得到一串網址,我們只會用到粗體字部分,其他不用留下

小秘訣:如果沒有要用那麼大的圖,分享時候可以選擇圖片大小接近的尺寸即可

[url=https://flic.kr/p/HuEhsL][img]https://farm1.staticflickr.com/801/27234959008_9a156d802a_o.jpg[/img][/url][url=https://flic.kr/p/HuEhsL]6000*3376[/url] by [url=https://www.flickr.com/photos/79461255@N04/]JkitH[/url], 於 Flickr

2.在 AxureRP 開啟檔案,把元件圖片新增到頁面上,圖片大小可以任意為 6000*3376 比例,最後放置在想要的位置

3.找到 properties>interactions>OnPageLoad 這個動作設定,進入後左邊找到 Set Image 勾選當前要載入圖的這個image物件可以找到 Default/Mouse Over/Mouse Down/Selected/Disable 等選項,今天只說明載入圖片方式所以在 Default 把選項改為 Value,後面就貼上剛剛的網址,圖片外連載入就完成了

4.展示網頁上面一張圖為圖床,下面一張為直接放進網站的圖,可以比較一下載入速度 https://i65cau.axshare.com/#c=2

最後用網站檢閱器來看一下,這邊三張圖片設定尺吋相同但路徑都不一樣

載入速度這邊有個明顯的差異,就經驗上來說若是線上圖檔超過10張以上的專案就會使用圖床與內容檔案並行,一方面可以分流減少負載,第二方便 專案製作管理,之後詳細介紹

小提示:直接把圖檔加入 AxureRP 有時會有警告,這是在問要不要壓縮圖檔的提醒,請記得點 ”YES”,有的時候這樣反而比分流還快速

This image is very large and may cause the application to run slower.

Would you like to optimize it?

如果喜歡 Axure Geek 的內容,請用 👏 給我們支持與鼓勵,能分享更好!
最多可以 👏 50下哦!

--

--