$30 off During Our Annual Pro Sale. View Details »

How do you show
assets loading?

yomotsu
April 21, 2017

How do you show
assets loading?

yomotsu

April 21, 2017
Tweet

More Decks by yomotsu

Other Decks in Technology

Transcript

  1. How do you show

    assets loading?
    Presented by Akihiro Oyamada (@yomotsu)
    Apr 21, 2017

    View Slide

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

    View Slide

  3. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. View Slide

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

    View Slide

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

    View Slide

  10. 3D Model file consists of mostly numbers

    View Slide

  11. 3D scanned(ish) Model file

    View Slide

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

    View Slide

  13. View Slide

  14. Save 70% of size!

    View Slide

  15. Can JS extract zip files?
    15

    View Slide

  16. There is a library!

    called zip-loader.js
    16

    View Slide

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

    View Slide

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

    View Slide

  19. gl.finish();
    @yomotsu

    View Slide