How do you show assets loading? - Speaker Deck

How do you show assets loading?

Speaker Deck

Share

Embed

Start on current slide

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 ﬁle consists of mostly numbers

Slide 11

Slide 11 text

3D scanned(ish) Model ﬁle

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.ﬁnish(); @yomotsu