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
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
830
PBR in three.js
Avatar for yomotsu yomotsu
1
1.1k
dialog要素でつくるモーダルダイアログ
Avatar for yomotsu yomotsu
0
1.1k
IE to Edge
Avatar for yomotsu yomotsu
1
390
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
The 7 pitfalls of AI
Avatar for Uwe Friedrichsen ufried
0
190
ServiceNow Knowledge 26 の歩き方
Avatar for ServiceNow Japan Meetup manarobot
0
340
Cortex Codeのコスト見積ヒントご紹介
Avatar for Yosuke Katsuki yokatsuki
0
150
20260428_Product Management Summit_Loglass_JoeHirose
Avatar for 広瀬丈 loglassjoe
4
6.8k
Forget technical debt
Avatar for Uwe Friedrichsen ufried
0
160
ハーネスエンジニアリング入門
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
0
110
エージェント時代の UIとAPI、CLI戦略
Avatar for coincheck coincheck_recruit
0
130
「誰一人取り残されない」 AIエージェント時代のプロダクト設計思想 Product Management Summit 2026
Avatar for mizushimac mizushimac
1
2.9k
Building Production-Ready Agents Microsoft Agent Framework
Avatar for Mert Metin _mertmetin
0
150
AI駆動開発で生産性を追いかけたら、行き着いたのは品質とシフトレフトだった
Avatar for Koichiro Matsuoka littlehands
0
360
AgentCore Managed Harness を使ってみよう
Avatar for やくも yakumo
2
310
新卒エンジニア研修、ハンズオンの設計における課題と実践知/ #tachikawaany
Avatar for Ichiro Nishiuma nishiuma
2
110

Featured

See All Featured
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
140
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
280
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
350
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Between Models and Reality
Avatar for mayunak mayunak
3
280
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
530
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k

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