Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How do you show
assets loading?

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for yomotsu yomotsu
April 21, 2017
Technology
1.1k
1

How do you show
assets loading?

Avatar for yomotsu

yomotsu

April 21, 2017

More Decks by yomotsu

See All by yomotsu
three.jsとRapierでレースゲームが3日でできた話
Avatar for yomotsu yomotsu
0
860
PBR in three.js
Avatar for yomotsu yomotsu
1
1.2k
dialog要素でつくるモーダルダイアログ
Avatar for yomotsu yomotsu
0
1.1k
IE to Edge
Avatar for yomotsu yomotsu
1
400
A Camera Control Library for three.js
Avatar for yomotsu yomotsu
1
1.5k
Let’s try AR
 on mobile Web with <model-viewer>
Avatar for yomotsu yomotsu
0
590
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.9k

Other Decks in Technology

See All in Technology
React、まだ楽しくて草
Avatar for uhyo uhyo
7
4k
インフラが苦手でも大丈夫！ 紙芝居 Kubernetes -WWGT 10周年編-
Avatar for Aoi Takahashi aoi1
1
340
「速く作る」から「正しく作る」へ ─ 生成AI時代の開発フロー改革の ロードマップと実行 ─
Avatar for starfish719 starfish719
0
6.7k
Claude Codeを組織で使いこなす— サーバサイドAIエージェント運用の実践知
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
200
Strands Agents超入門
Avatar for KintoTech_Dev kintotechdev
1
160
Platform engineering for developers, architects & the rest of us (AI agents)
Avatar for danielbryantuk danielbryantuk
0
180
PHP と TypeScript の型システム比較：AI 時代の「型」は誰のためにあるのか？ #frontend_phpcon_do / frontend_phpcon_do_2026
Avatar for shogogg shogogg
1
240
トークン数だけでは測れない — Claude Code 組織展開の効果検証から学んだこと
Avatar for Masaki Kubota makikub
0
120
エンジニアは生成AIと どのように向き合うべきか？ ことばの意味という観点から
Avatar for Hitomi Yanaka verypluming
3
350
Dynamic Workersについて
Avatar for Yusuke Wada yusukebe
2
580
新規事業を牽引する技術選定 〜フルスタックTypeScript開発の実践事例〜
Avatar for Katsuma Narisawa nullnull
2
300
ChatworkとBPaaS 異なる特性で学んだAI機能開発の ベストプラクティス
Avatar for kubell kubell_hr
2
2.5k

Featured

See All Featured
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
340
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
930
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
380
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
38k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
74k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
190
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
240
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
380
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
350

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