| onload |
| onloadは「Webページに表示されるすべての読み込みが完了した時点」で処理を行うのが基本です。 |
| [動作について] |
(1)エラー発生によるonload処理の中断 javascriptエラーが発生した場合はonload処理が実行されないケースがあります。 (例) 指定したタグidが存在しないのに指定したことでjavascriptエラーが発生した場合。 |
(2)onloadが複数存在するケース onloadが複数存在する場合は、最後のonloadが実行されます。※onloadが上書きされるため |
(3)DOMContentLoadedイベントが実行される順番 DOMContentLoadedイベントを実行される場合は通常のonloadイベントよりも早く動作します。 onloadよりも早く、HTMLを読み込んだ時点で実行します。 |
(4)head要素内に実装したケース すべての読み込みが完了しないとDOMがレンダリングされないのでWebページの表示が遅くなります。 |
| [ブラウザの状態] | ||||||||
| (1) HTTPレスポンスによるhtmlファイルの受け取り | ||||||||
| (2) htmlファイル読み込み | ||||||||
| (3) 外部リソース読み込み | ||||||||
| (4) 外部リソース読み込み完了 | ||||||||
(5) readystatechangeイベント
| ||||||||
| (6) loadイベント |
| [loadイベント] |
| (1)window.onload |
[サンプル]
function loadTest()
{
//ページ読み込み完了後に実行する処理
alert('onloadイベントが発生しました');
}
/*
(例)
window.onload = 関数名;
*/
window.onload = loadTest;
/*
(例)
window.onload = function()という無名関数とした例
*/
window.onload = function()
{
loadTest();
};
|
| (2)window.addEventListenerによるロードイベント |
[サンプル]
function loadTest()
{
//ページ読み込み完了後に実行する処理
alert('onloadイベントが発生しました');
}
window.addEventListener('load', function() {
loadTest();
})
|
| [実行結果] |
window.onload = function()
{
alert("window.onload");
};
window.addEventListener('load', function() {
alert("addEventListener load event");
})
window.addEventListener('load', function() {
alert("addEventListener load event");
})
window.onload = function()
{
alert("window.onload");
};
window.addEventListener('load', function() {
alert("addEventListener load event");
})
window.onload = function()
{
alert("window.onload");
};
window.addEventListener('DOMContentLoaded', function() {
alert("最初に実装したDOMContentLoaded");
})
window.addEventListener('DOMContentLoaded', function() {
alert("最後に実装したDOMContentLoaded");
})
| (1) | 最初に実装したDOMContentLoaded |
| (2) | 最後に実装したDOMContentLoaded |
| (3) | addEventListener load event |
| onload |
| The basic principle of onload is that it processes when all the content displayed on the web page has finished loading. |
| [About operation] |
(1) Onload processing is interrupted due to an error If a javascript error occursThere are cases where the onload process is not executed. (Example) If a javascript error occurs because the specified tag ID does not exist. |
(2) Cases where there are multiple onloads If there are multiple onloads, the last onload will be executed. *Because onload is overwritten |
(3) Order in which DOMContentLoaded events are executed When the DOMContentLoaded event is executed, it runs faster than the normal onload event. It runs faster than onload, as soon as the HTML is loaded. |
(4) Implemented within the head element The DOM is not rendered until all loading is complete, which slows down the display of web pages. |
| [Browser Status] | ||||||||
| (1) Receiving an html file as an HTTP response | ||||||||
| (2) Loading html files | ||||||||
| (3) Loading external resources | ||||||||
| (4) External resources loaded | ||||||||
(5) readystatechange event
| ||||||||
| (6) load event |
| [load event] |
| (1)window.onload |
[Sample]
function loadTest()
{
//Processing to be executed after the page has finished loading
alert('onload event has occurred');
}
/*
ex.)
window.onload = function name;
*/
window.onload = loadTest;
/*
ex.)
An example of an anonymous function called window.onload = function()
*/
window.onload = function()
{
loadTest();
};
|
| (2) Load event via window.addEventListener |
[Sample]
function loadTest()
{
//Processing to be executed after the page has finished loading
alert('onload event has occurred');
}
window.addEventListener('load', function() {
loadTest();
})
|
| [Execution result] |
window.onload = function()
{
alert("window.onload");
};
window.addEventListener('load', function() {
alert("addEventListener load event");
})
window.addEventListener('load', function() {
alert("addEventListener load event");
})
window.onload = function()
{
alert("window.onload");
};
window.addEventListener('load', function() {
alert("addEventListener load event");
})
window.onload = function()
{
alert("window.onload");
};
window.addEventListener('DOMContentLoaded', function() {
alert("First implementation of DOMContentLoaded");
})
window.addEventListener('DOMContentLoaded', function() {
alert("Finally implemented DOMContentLoaded");
})
| (1) | First implementation of DOMContentLoaded |
| (2) | Finally implemented DOMContentLoaded |
| (3) | addEventListener load event |
| ホームページおよプリ等に掲載されている情報等については、いかなる保障もいたしません。 ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、 または公開したりすることはできません。 当方は、ホームペーよびアプリ利用したいかなる理由によっての障害等が発生しても、 その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について 一切の責任を負わないものとします。 |