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
600
PBR in three.js
Avatar for yomotsu yomotsu
1
920
dialog要素でつくるモーダルダイアログ
Avatar for yomotsu yomotsu
0
1k
IE to Edge
Avatar for yomotsu yomotsu
1
350
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
550
WebXR: Beyond
 WebGL
Avatar for yomotsu yomotsu
2
1.8k
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
Data Engineering Study#30 LT資料
Avatar for tetsuroito tetsuroito
1
200
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
Avatar for mackerelio mackerelio
3
2k
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
Avatar for GENDA genda
1
270
CDK Toolkit Libraryにおけるテストの考え方
Avatar for Makky12 smt7174
1
550
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
Avatar for helosshi helosshi
0
100
三視点LLMによる複数観点レビュー
Avatar for リリカル mhlyc
0
230
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
Avatar for goldfinch3710 flyaahelpguide
0
240
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
Avatar for Yusuke WADA fillznoh
0
130
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
Avatar for ニフティ株式会社 niftycorp
PRO
1
520
対話型音声AIアプリケーションの信頼性向上の取り組み
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
3
1.1k
ソフトウェアQAがハードウェアの人になったの
Avatar for Matsu mineo_matsuya
3
210
サービスを止めるな！ DDoS攻撃へのスマートな備えと最前線の事例
Avatar for coconala_engineer coconala_engineer
1
180

Featured

See All Featured
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.6k
Navigating Team Friction
Avatar for Lara Hogan lara
187
15k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
21
1.3k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
47
9.6k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k

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