1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
---
title: load
slug: Web/Events/load
tags:
- load
translation_of: Web/API/Window/load_event
---
<p>{{APIRef}}</p>
<p>当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发<code>load</code>事件。</p>
<p>它与{{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}不同，后者只要页面DOM加载完成就触发，无需等待依赖资源的加载。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row">是否冒泡</th>
<td>否</td>
</tr>
<tr>
<th scope="row">能否取消</th>
<td>否</td>
</tr>
<tr>
<th scope="row">接口</th>
<td>{{domxref("Event")}}</td>
</tr>
<tr>
<th scope="row">Event handler property</th>
<td>{{domxref("GlobalEventHandlers/onload", "onload")}}</td>
</tr>
</tbody>
</table>
<h2 id="用法">用法</h2>
<p>当页面及资源完全加载后在控制台打印一段信息：</p>
<pre class="brush: js notranslate">window.addEventListener('load', (event) => {
console.log('page is fully loaded');
});</pre>
<p>也可以使用<code>onload</code>实现：</p>
<pre class="brush: js notranslate">window.onload = (event) => {
console.log('page is fully loaded');
};</pre>
<h2 id="示例">示例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><div class="controls">
<button id="reload" type="button">Reload</button>
</div>
<div class="event-log">
<label>Event log:</label>
<textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
</div></pre>
<div class="hidden">
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">body {
display: grid;
grid-template-areas: "control log";
}
.controls {
grid-area: control;
display: flex;
align-items: center;
justify-content: center;
}
.event-log {
grid-area: log;
}
.event-log-contents {
resize: none;
}
label, button {
display: block;
}
#reload {
height: 2rem;
}
</pre>
</div>
<h3 id="JS">JS</h3>
<pre class="brush: js notranslate">const log = document.querySelector('.event-log-contents');
const reload = document.querySelector('#reload');
reload.addEventListener('click', () => {
log.textContent ='';
window.setTimeout(() => {
window.location.reload(true);
}, 200);
});
window.addEventListener('load', (event) => {
log.textContent = log.textContent + 'load\n';
});
document.addEventListener('readystatechange', (event) => {
log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
});
document.addEventListener('DOMContentLoaded', (event) => {
log.textContent = log.textContent + `DOMContentLoaded\n`;
});
</pre>
<h4 id="结果">结果</h4>
<p>{{ EmbedLiveSample('Live_example', '100%', '160px') }}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('UI Events', '#event-type-load', 'load')}}</td>
<td>{{Spec2('UI Events')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', '#delay-the-load-event', 'load event')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>此链接指向加载文档结束时执行步骤中的部分。“load”事件也会在许多元素上触发。 请注意，规范中有很多地方涉及到可以"<a href="https://html.spec.whatwg.org/multipage/parsing.html#delay-the-load-event">延迟加载事件</a>"的内容。</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">
<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送请求请求。</p>
</div>
<p>{{Compat("api.Window.load_event")}}</p>
<h2 id="参阅">参阅</h2>
<ul>
<li>相关事件: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}}</li>
</ul>
|
