Pokédex|寶可夢圖鑑
簡介 在 Instagram 看到有人分享在日本操作機器、製作寶可夢客製化衣服的貼文,聯想起先前在網上閱讀到關於 Pokémon API 的文章,一時興起也使用 PokeAPI 仿刻貼文中機器的操作介面。然而在開發過程中,發現連續抓取 905 份寶可夢資料實在耗時 (約 50 秒),因此特意自製一份包含了 905 隻寶可夢 id、名稱、圖片及種類的 JSON 資料檔,極大縮短頁面的載入時間。
外觀與互動設計
開發紀錄 - 透過 Node.js 將 PokeAPI 905 份寶可夢資料轉換成一份 JSON API,將網頁載入時間縮短為 1 秒,並實現中英語言切換
- 使用體積小的 Vue 代替方案 - Petite Vue 作為開發方式
- 使用寶可夢的 types 資料,製作出可透過點擊切換不同寶可夢種類的標籤
- 開發過程中發現在切換寶可夢分類 (filter) 時,相較於建立 computed 的資料再使用 Vue 語法 v-for 產出元素,透過對元素綁定 HTML 屬性 hidden 或是改變其 CSS 屬性 display 的作法,有更好的狀態更新效能
- 分別針對資訊卡中的寶可夢中、英文名字,以平均字數為基準,自動調整字體大小
- 將整體寶可夢圖片從 118.2MB 壓縮到 32.8MB,進一步加快網頁載入
成為作者繼續創作的動力吧!
從 Google News 追蹤更多 vocus 的最新精選內容 作者的相關文章
你可能也想看
發表回應
© 2024 vocus All rights reserved.