JavaScript window.onload

window.onload()Метод используется для выполнения операции сразу после загрузки веб-страницы; то есть, как только HTML-документ завершит загрузку, метод выполняется немедленно.

window.onload()Обычно используется в элементе <body> для выполнения кода сценария после полной загрузки страницы (включая изображения, CSS-файлы и т. д.).

Синтаксис, когда нужно выполнить только одну функцию:

window.onload = funcRef;

Метод funcRef будет вызван после завершения загрузки страницы.

Синтаксис, когда нужно выполнить несколько функций:

window.onload=function(){
    Func1();
    Func2();
    Func3();
    .....
}

После завершения загрузки страницы Func1, Func2 и Func3 будут выполнены по порядку.

Зачем использовать window.onload()?

Потому что методы функций JavaScript можно использовать только после завершения рендеринга HTML-документа. Если рендеринг не завершён, DOM-дерево в этот момент неполно, поэтому вызов некоторого кода JavaScript может привести к ошибке "undefined".

Пример

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Тест без использования window.onload()</title> <style type="text/css"> #bg{ width:120px; height:120px; border:4px solid blue; } </style> <script type="text/javascript"> document.getElementById("bg").style.backgroundColor="#F00"; </script> </head> <body> <div id="bg"></div> </body> </html>

Попробуйте сами »

В приведенном выше примере эффект, которого мы хотим достичь, — установить цвет фона div на #F90, но этот эффект не был достигнут, потому что код выполняется последовательно. Когда выполнение доходит доdocument.getElementById("#bg").style.backgroundColor="#F00"объект div еще не загружен, поэтому цвет фона не был успешно установлен. Сообщение об ошибке выглядит следующим образом:

Мы можем добавить window.onload, и он будет выполняться нормально. Измененный код выглядит следующим образом:

Пример

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Тест с использованием window.onload()</title> <style type="text/css"> #bg{ width:120px; height:120px; border:4px solid blue; } </style> <script type="text/javascript"> window.onload=function(){ document.getElementById("bg").style.backgroundColor="#F00"; } </script> </head> <body> <div id="bg"></div> </body> </html>

Попробуйте сами »

Событие window.onload привязывает функцию обработчика событий. Оно привязывает анонимную функцию, и, конечно, вы также можете привязать именованную функцию. Пример кода выглядит следующим образом:

Пример

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Использование window.onload() для привязки конкретной функции</title> <script type="text/javascript">// Function Nameis example window.onload=function example(){ document.write(“Rookie Tutorial -- Learning is not only about technology, but also about dreams!!!"); }</script> </head> <body> </body> </html>

Попробуйте сами »

Пример с несколькими функциями для выполнения:

Пример

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>Использование window.onload() для выполнения нескольких функций</title> <style type="text/css"> #bg{ width:100px; height:100px; border:2px solid blue; } </style> <script type="text/javascript"> window.onload=function(){ function example1(){ document.getElementById("bg").style.backgroundColor="#F00"; } function example2(){ document.getElementById("bg").style.width="200px"; document.getElementById("bg").style.height="200px"; } example1(); example2(); } </script> </head> <body> <div id="bg"></div> </body> </html>

Попробуйте сами »

Разница между window.onload и jQuery ready()

window.onload = function () {};    // JavaScript 
$(document).ready(function () {}); // jQuery

Оба вышеперечисленных метода выполняют операции с DOM после завершения загрузки HTML-документа, но между ними всё же есть определённые различия, как показано на рисунке ниже: