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
990

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
530
PBR in three.js
Avatar for yomotsu yomotsu
1
880
dialog要素でつくるモーダルダイアログ
Avatar for yomotsu yomotsu
0
990
IE to Edge
Avatar for yomotsu yomotsu
1
340
A Camera Control Library for three.js
Avatar for yomotsu yomotsu
1
1.2k
Let’s try AR
 on mobile Web with <model-viewer>
Avatar for yomotsu yomotsu
0
540
WebXR: Beyond
 WebGL
Avatar for yomotsu yomotsu
2
1.8k
Non-DOM components with WebGL in Vue.js
Avatar for yomotsu yomotsu
5
12k
WebGL Libs for
 WebApp Frameworks
Avatar for yomotsu yomotsu
4
7.8k

Other Decks in Technology

See All in Technology
10ヶ月かけてstyled-components v4からv5にアップデートした話
Avatar for uhyo uhyo
5
440
Aspire をカスタマイズしよう & Aspire 9.2
Avatar for neno nenonaninu
0
340
GraphQLを活用したリアーキテクチャに対応するSLI/Oの再設計
Avatar for coconala_engineer coconala_engineer
0
170
バクラクの認証基盤の成長と現在地 / bakuraku-authn-platform
Avatar for convto convto
4
860
Microsoft の SSE の現在地
Avatar for skmkzyk skmkzyk
0
260
AIエージェント開発手法と業務導入のプラクティス
Avatar for Yoshinori Kosaka ykosaka
9
2.6k
Dataverseの検索列について
Avatar for MiyakeMito miyakemito
1
150
SREからゼロイチプロダクト開発へ ー越境する打席の立ち方と期待への応え方ー / Product Engineering Night #8
Avatar for itkq itkq
2
1.1k
SnowflakeとDatabricks両方でRAGを構築してみた
Avatar for camay kameitomohiro
1
550
[JPOUG Tech Talk Night #12]SQL Plan Management(SPM)とAdaptive Cursor Sharing(ACS)の組み合わせ
Avatar for oracle4engineer oracle4engineer
PRO
2
100
ドキュメント管理の理想と現実
Avatar for Ohara Kazuhiro kazuhe
1
290
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
2
420

Featured

See All Featured
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
78
6.3k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
336
57k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
205
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
160
15k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
50k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.7k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
21k
Designing for Performance
Avatar for Lara Hogan lara
608
69k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
349
20k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
133
9.2k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Fontdeck: Realign not Redesign
Avatar for Paul Robert Lloyd paulrobertlloyd
84
5.5k

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