Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How do you show
assets loading?

Avatar for yomotsu yomotsu
April 21, 2017
Technology
1
1k

How do you show
assets loading?

Avatar for yomotsu

yomotsu

April 21, 2017
Tweet

More Decks by yomotsu

See All by yomotsu
three.jsとRapierでレースゲームが3日でできた話
Avatar for yomotsu yomotsu
0
700
PBR in three.js
Avatar for yomotsu yomotsu
1
970
dialog要素でつくるモーダルダイアログ
Avatar for yomotsu yomotsu
0
1k
IE to Edge
Avatar for yomotsu yomotsu
1
360
A Camera Control Library for three.js
Avatar for yomotsu yomotsu
1
1.3k
Let’s try AR
 on mobile Web with <model-viewer>
Avatar for yomotsu yomotsu
0
570
WebXR: Beyond
 WebGL
Avatar for yomotsu yomotsu
2
1.9k
Non-DOM components with WebGL in Vue.js
Avatar for yomotsu yomotsu
5
13k
WebGL Libs for
 WebApp Frameworks
Avatar for yomotsu yomotsu
4
7.9k

Other Decks in Technology

See All in Technology
AI × クラウドで シイタケの収穫時期を判定してみた
Avatar for Lamaglama39 lamaglama39
1
340
CloudFormationコンソールから、 実際に作られたリソースを辿れるようになろう！
Avatar for amixedcolor amixedcolor
1
190
Flutterにしてよかった？出前館アプリを2年運用して気づいたことを全部話します
Avatar for 株式会社出前館 demaecan
0
220
Progressive Deliveryで支える！スケールする衛星コンステレーションの地上システム運用 / Ground Station Operation for Scalable Satellite Constellation by Progressive Delivery
Avatar for iselegant iselegant
1
190
Rubyist入門: The Way to The Timeless Way of Programming
Avatar for Koji SHIMADA snoozer05
PRO
7
510
『HOWはWHY WHATで判断せよ』 〜『ドメイン駆動設計をはじめよう』の読了報告と、本質への探求〜
Avatar for HideyukiKitao panda728
PRO
5
2k
仕様駆動 x Codex で 超効率開発
Avatar for Izumu KUSUNOKI ismk
2
1.5k
仕様は“書く”より“語る” - 分断を超えたチーム開発の実践 / 20251115 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
990
個人から巡るAI疲れと組織としてできること - AI疲れをふっとばせ。エンジニアのAI疲れ治療法 ショートセッション -
Avatar for kichion kikuchikakeru
4
1.3k
身近なCSVを活用する！AWSのデータ分析基盤アーキテクチャ
Avatar for Kotaro.S koosun
0
1.6k
ステートレスなLLMでステートフルなAI agentを作る - YAPC::Fukuoka 2025
Avatar for FUJI Goro gfx
8
1.3k
ABEMAのCM配信を支えるスケーラブルな分散カウンタの実装
Avatar for Honoka Toda hono0130
3
820

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
670
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
76
5.1k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k

Transcript

  1. How do you show
 assets loading? Presented by Akihiro Oyamada

    (@yomotsu) Apr 21, 2017

  2. Frontend Engineer at PixelGrid, Inc. Akihiro Oyamada @yomotsu

  3. None

  4. • ϩʔυ͍ͯ͠Δͷ͸Θ͔Δ • ͍ͭऴΘΔͷ͔͸Θ͔Βͳ͍ εϐφʔ

  5. http://www.createjs.com/preloadjs

  6. • ϩʔυਐߦ౓͕Θ͔Δ • ϩʔυਐߦ౓͸ϦχΞͰ͸ͳ͍ • ϑΝΠϧϔομ͸ϑΝΠϧ਺෼ Preload.js

  7. None

  8. • ϑΝΠϧϔομ͸1ͭʢϑΝΠϧ͕݁߹͞Ε͍ͯΔʣ • XHR2Ͱϩʔυਐߦ౓΋औΕΔ(ϦχΞ) • ѹॖ͕ޮ͘ zip

  9. http://yomotsu.net/blog/assets/2016-12-25-xmas/

  10. 3D Model file consists of mostly numbers

  11. 3D scanned(ish) Model file

  12. http://localhost:8000/5_compress/bad.html

  13. None

  14. Save 70% of size!

  15. Can JS extract zip files? 15

  16. There is a library!
 called zip-loader.js 16

  17. https://www.npmjs.com/package/zip-loader

  18. demo https://www.npmjs.com/package/zip-loader

  19. gl.finish(); @yomotsu