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
560
PBR in three.js
Avatar for yomotsu yomotsu
1
900
dialog要素でつくるモーダルダイアログ
Avatar for yomotsu yomotsu
0
1k
IE to Edge
Avatar for yomotsu yomotsu
1
340
A Camera Control Library for three.js
Avatar for yomotsu yomotsu
1
1.2k
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
12k
WebGL Libs for
 WebApp Frameworks
Avatar for yomotsu yomotsu
4
7.8k

Other Decks in Technology

See All in Technology
What's Next in OpenShift Q2 CY2025
Avatar for Red Hat Livestreaming redhatlivestreaming
1
820
AIエージェントデザインパターンの選び方
Avatar for Almondoイベント担当 almondo_event
0
150
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1.7k
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
8
65k
從開發到架構設計的可觀測性實踐
Avatar for philipz philipz
0
120
CSS polyfill とその未来
Avatar for ken7253 ken7253
0
140
toittaにOpenTelemetryを導入した話 / Mackerel APM リリースパーティ
Avatar for cohalz cohalz
1
490
AIの電力問題を概観する
Avatar for Ryuichi Maruyama rmaruy
1
220
AIのための
オンボーディングドキュメントを整備する - hirotea
Avatar for hirotea hirotea
9
2.3k
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
Avatar for uutan1108 ohmori_yusuke
2
120
Scale Security Programs with Scorecarding
Avatar for Rami McCarthy ramimac
0
440
Azure Developer CLI と Azure Deployment Environment / Azure Developer CLI and Azure Deployment Environment
Avatar for ののし nnstt1
1
130

Featured

See All Featured
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
336
57k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
Navigating Team Friction
Avatar for Lara Hogan lara
186
15k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
32
5.8k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
52
2.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
49
8.1k

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