setTimeoutが効かない

実は、$(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 の場合、

  1. Document:DOMContentLoaded
  2. HTMLMediaElement:loadedmetadata
  3. Window:load

の順番でイベントが発火しているようです。

$(function(){...})は、Document:DOMContentLoadedなので、

  1. Document:DOMContentLoaded
  2. opVideo.addEventListener('loadedmetadata', ...)
  3. HTMLMediaElement:loadedmetadata
  4. Window:load

こういう順番で処理されると思われますが、

$(window).on('load resize', ...)は、

  1. Document:DOMContentLoaded
  2. HTMLMediaElement:loadedmetadata
  3. Window:load
  4. opVideo.addEventListener('loadedmetadata', ...)

という順番で処理されそうです。

つまり、発火後にハンドラの設定をしていますから、イベントを受取れないだろうと思います。


余談になりますが、Firefoxで試したところ、

  1. HTMLMediaElement:loadedmetadata
  2. Document:DOMContentLoaded
  3. Window:load

という順番でしたので、こちらはどちらにしても動かないです。おそらく、プロパティをチェックするなどしてイベントがすでに発火しているかどうかをチェックする必要がありそうです。
Safariは試してないです。

コメントを投稿

0 コメント