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
690
PBR in three.js
Avatar for yomotsu yomotsu
1
960
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
560
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.8k

Other Decks in Technology

See All in Technology
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか？~
Avatar for curekoshimizu curekoshimizu
3
650
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
20k
プレイドのユニークな技術とインターンのリアル
Avatar for PLAID Tech plaidtech
PRO
1
330
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
Avatar for Jumpei Sakatsu saka2jp
0
110
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
2.8k
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
9k
データ戦略部門 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.8k
「最速」で Gemini CLI を使いこなそう！ 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
Avatar for Kento Kimura aoto
PRO
1
170
Wasmの気になる最新情報
Avatar for asuka askua
0
190
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
Avatar for Rikito Taniguchi tanishiking
0
180
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
Avatar for 弁護士ドットコム bengo4com
3
1.7k
Dify on AWS 環境構築手順
Avatar for Hiroaki Yoshimura yosse95ai
0
120

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
369
20k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
54k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.8k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
23k

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