実は、$(function(){...})
はload
イベントではないです。
Most browsers provide similar functionality in the form of a DOMContentLoaded event.
.ready() | jQuery API Documentation
別なイベントである load は、ページ全体が読み込まれたときにのみ使用します。 load を DOMContentLoaded がより適切である場面で使ってしまうことがよくある誤りです。
Document: DOMContentLoaded イベント - Web API | MDN
load イベントは、ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生します。
Window: load イベント - Web API | MDN
なので、DOMContentLoaded
イベントで試してみてはどうでしょうか。
読み返してみてちょっとわかりにくいかな、と思ったので補足します。
Chrome の場合、
- Document:DOMContentLoaded
- HTMLMediaElement:loadedmetadata
- Window:load
の順番でイベントが発火しているようです。
$(function(){...})
は、Document:DOMContentLoadedなので、
- Document:DOMContentLoaded
- opVideo.addEventListener('loadedmetadata', ...)
- HTMLMediaElement:loadedmetadata
- Window:load
こういう順番で処理されると思われますが、
$(window).on('load resize', ...)
は、
- Document:DOMContentLoaded
- HTMLMediaElement:loadedmetadata
- Window:load
- opVideo.addEventListener('loadedmetadata', ...)
という順番で処理されそうです。
つまり、発火後にハンドラの設定をしていますから、イベントを受取れないだろうと思います。
余談になりますが、Firefoxで試したところ、
- HTMLMediaElement:loadedmetadata
- Document:DOMContentLoaded
- Window:load
という順番でしたので、こちらはどちらにしても動かないです。おそらく、プロパティをチェックするなどしてイベントがすでに発火しているかどうかをチェックする必要がありそうです。
Safariは試してないです。
0 コメント