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
630
PBR in three.js
Avatar for yomotsu yomotsu
1
940
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
560
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
ZOZOマッチのアーキテクチャと技術構成
Avatar for ZOZO Developers zozotech
PRO
2
1.1k
DeNA での思い出 / Memories at DeNA
Avatar for Kuniwak orgachem
PRO
6
1.9k
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
Avatar for macneko-ayu macnekoayu
0
260
AI エージェントとはそもそも何か？ - 技術背景から Amazon Bedrock AgentCore での実装まで- / AI Agent Unicorn Day 2025
Avatar for Yoshitaka Haribara hariby
2
530
エラーとアクセシビリティ
Avatar for Tajima Sachiko schktjm
0
230
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
Avatar for Tobias Lampert tobiaslampertlotum
0
120
ヘブンバーンズレッドのレンダリングパイプライン刷新
Avatar for gree_tech gree_tech
PRO
0
440
おやつは300円まで！の最適化を模索してみた
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
250
MCPで変わる Amebaデザインシステム「Spindle」の開発
Avatar for Ameba Spindle spindle
PRO
2
2k
TypeScript入門
Avatar for Recruit recruitengineers
PRO
35
11k
AIエージェントの活用に重要な「MCP （Model Context Protocol）」とは何か
Avatar for Masaya Mori (森正弥) / CAIO (Chief AI Officer) masayamoriofficial
0
250
トヨタ生産方式(TPS)入門
Avatar for Recruit recruitengineers
PRO
6
1.4k

Featured

See All Featured
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Code Review Best Practice
Avatar for Trisha Gee trishagee
70
19k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
139
34k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Faster Mobile Websites
Avatar for Dean Hume deanohume
309
31k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k

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