Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
YUI3 DOMReady Bug
Search
ningzbruc
January 24, 2013
Technology
1
100
YUI3 DOMReady Bug
There's a bug in yui3 domready event
ningzbruc
January 24, 2013
Tweet
Share
More Decks by ningzbruc
See All by ningzbruc
如何写出一个优秀的开源库
ningzbruc
0
46
去啊无线前端的一天
ningzbruc
1
150
React & Component
ningzbruc
0
32
阿里旅行去啊H5首页总结&Promise
ningzbruc
0
250
KISSY.Base - all about that Base
ningzbruc
0
110
Hammer.js
ningzbruc
1
330
淘宝旅行门票iPad版开发
ningzbruc
0
120
Travel on KISSY mini
ningzbruc
0
180
Events
ningzbruc
2
120
Other Decks in Technology
See All in Technology
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
370
KotlinConf 2025_イベントレポート
sony
1
140
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
310
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
slog.Handlerのよくある実装ミス
sakiengineer
4
410
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
730
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
170
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
470
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
aeonpeople
1
210
テストを軸にした生き残り術
kworkdev
PRO
0
210
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
160
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
Featured
See All Featured
Side Projects
sachag
455
43k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building an army of robots
kneath
306
46k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How GitHub (no longer) Works
holman
315
140k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Making Projects Easy
brettharned
117
6.4k
A designer walks into a library…
pauljervisheath
207
24k
Transcript
More Than DOMReady —— yui3 domready bug 1
WTF?! • Request was blocked? • IE was even faster
than Chrome?! • All modules were loaded! 2
domready? Y.on('domready', function() { // more code }); 3
DOMReady • DOMContentLoaded • doScroll • document.readyState 4
DOMContentLoaded document.addEventListener('DOMContentLoaded', function() { fireReady(); }, false); 5
doScroll if (self === self.top) { window.domreadyPoll = setInterval(function() {
try { document.documentElement.doScroll('left'); clearInterval(window.domreadyPoll); window.domreadyPoll = null; fireReady(); } catch (domNotReady) {} }, 10); } 6
document.readyState • loading • interactive • complete 7
document.readyState document.onreadystatechange = function() { if (document.readyState == 'complete') {
fireReady(); document.onreadystatechange = null; } }; 8
fallback window.onload = function() { fireReady(); }; 9
fireOnce • DOMContentLoaded • onload • onreadystatechange (each state) 10
fireOnce window.onload = function() { document.addEventListener('DOMContentLoaded', function(e) { // Oops!
}, false); }; 11
States if (Y.Env.DOMReady) { fireReady(); } if (document.readyState == 'complete')
{ fireReady(); } 12
Non-blocking Script Load • unblock DOMContentLoad • block onload •
block complete readyState 13
What’s the difference? 14
Where Tragedy Happens! DOMContentloaded Slow request Blocked! Event loaded IE
- doScroll onload & domready Endless waiting 15
Solution • contentready • fix it in config file 16
Contentready Y.on('contentready', function() { // more code }, '#content'); 17
Fix it YUI.GlobalConfig = { modules: { // modules config
} }; (function () { var GLOBAL_ENV = YUI.Env; if (!GLOBAL_ENV._ready) { GLOBAL_ENV._ready = function() { GLOBAL_ENV.DOMReady = true; GLOBAL_ENV.remove(YUI.config.doc, 'DOMContentLoaded', GLOBAL_ENV._ready); }; GLOBAL_ENV.add(YUI.config.doc, 'DOMContentLoaded', GLOBAL_ENV._ready); } })(); 18
Advice Test More! 19
] { the end. 20