回答編集履歴

2

解説を追記

2024/03/29 09:09

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36149

test CHANGED
@@ -10,3 +10,46 @@
10
10
  > [Window: load イベント - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Window/load_event)
11
11
 
12
12
  なので、`DOMContentLoaded`イベントで試してみてはどうでしょうか。
13
+
14
+ ---
15
+
16
+ 読み返してみてちょっとわかりにくいかな、と思ったので補足します。
17
+
18
+ Chrome の場合、
19
+
20
+ 0. Document:DOMContentLoaded
21
+ 0. HTMLMediaElement:loadedmetadata
22
+ 0. Window:load
23
+
24
+ の順番でイベントが発火しているようです。
25
+
26
+ `$(function(){...})`は、Document:DOMContentLoadedなので、
27
+
28
+ 0. Document:DOMContentLoaded
29
+ 0. opVideo.addEventListener('loadedmetadata', ...)
30
+ 0. HTMLMediaElement:loadedmetadata
31
+ 0. Window:load
32
+
33
+ こういう順番で処理されると思われますが、
34
+
35
+ `$(window).on('load resize', ...)`は、
36
+
37
+ 0. Document:DOMContentLoaded
38
+ 0. HTMLMediaElement:loadedmetadata
39
+ 0. Window:load
40
+ 0. opVideo.addEventListener('loadedmetadata', ...)
41
+
42
+ という順番で処理されそうです。
43
+
44
+ つまり、発火後にハンドラの設定をしていますから、イベントを受取れないだろうと思います。
45
+
46
+ ---
47
+
48
+ 余談になりますが、Firefoxで試したところ、
49
+
50
+ 0. HTMLMediaElement:loadedmetadata
51
+ 0. Document:DOMContentLoaded
52
+ 0. Window:load
53
+
54
+ という順番でしたので、こちらはどちらにしても動かないです。おそらく、プロパティをチェックするなどしてイベントがすでに発火しているかどうかをチェックする必要がありそうです。
55
+ Safariは試してないです。

1

引用の追加

2024/03/29 03:25

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36149

test CHANGED
@@ -6,4 +6,7 @@
6
6
  > 別なイベントである load は、ページ全体が読み込まれたときにのみ使用します。 load を DOMContentLoaded がより適切である場面で使ってしまうことがよくある誤りです。
7
7
  > [Document: DOMContentLoaded イベント - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Document/DOMContentLoaded_event)
8
8
 
9
+ > load イベントは、ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生します。
10
+ > [Window: load イベント - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Window/load_event)
11
+
9
12
  なので、`DOMContentLoaded`イベントで試してみてはどうでしょうか。