Slide 1
Slide 1 text
How do you show
assets loading?
Presented by Akihiro Oyamada (@yomotsu)
Apr 21, 2017
Slide 2
Slide 2 text
Frontend Engineer
at PixelGrid, Inc.
Akihiro Oyamada
@yomotsu
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
• ϩʔυ͍ͯ͠ΔͷΘ͔Δ
• ͍ͭऴΘΔͷ͔Θ͔Βͳ͍
εϐφʔ
Slide 5
Slide 5 text
http://www.createjs.com/preloadjs
Slide 6
Slide 6 text
• ϩʔυਐߦ͕Θ͔Δ
• ϩʔυਐߦϦχΞͰͳ͍
• ϑΝΠϧϔομϑΝΠϧ
Preload.js
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
• ϑΝΠϧϔομ1ͭʢϑΝΠϧ͕݁߹͞Ε͍ͯΔʣ
• XHR2ͰϩʔυਐߦऔΕΔ(ϦχΞ)
• ѹॖ͕ޮ͘
zip
Slide 9
Slide 9 text
http://yomotsu.net/blog/assets/2016-12-25-xmas/
Slide 10
Slide 10 text
3D Model file consists of mostly numbers
Slide 11
Slide 11 text
3D scanned(ish) Model file
Slide 12
Slide 12 text
http://localhost:8000/5_compress/bad.html
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Save 70% of size!
Slide 15
Slide 15 text
Can JS extract zip files?
15
Slide 16
Slide 16 text
There is a library!
called zip-loader.js
16
Slide 17
Slide 17 text
https://www.npmjs.com/package/zip-loader
Slide 18
Slide 18 text
demo
https://www.npmjs.com/package/zip-loader
Slide 19
Slide 19 text
gl.finish();
@yomotsu