Какой смысл в JavaScript window.onload?

Question

Я никогда не понимал этого, в чем смысл использования window.onload, как если бы у загрузки JavaScript ничего не было в функции, как только загрузилась страница?

window.onload = function() { 
 
    alert("hello"); 
 
};

Answer 1

From MDN:

срабатывает событие нагрузки в конце процесса загрузки документа. В эта точка, все объекты в документе находятся в DOM, и все изображения, скрипты, ссылки и подкадры завершают загрузку.

Так что если вам нужно убедиться, что все загружено, то это событие нужно ждать, чтобы стрелять. Если вы используете документ готов или поместите скрипт в нижней части тела, не все содержимое может быть полностью загружено.

Почему бы вам не использовать его. Вернувшись в действительно старые времена, это был единственный реальный способ узнать, что страница загружена. Но основная причина заключается в том, что вам действительно нужно полагаться на все содержимое, необходимое для вычисления высот/позиций элементов, чем вам нужно, чтобы убедиться, что они все полностью там и визуализированы. Если вы сделали это наготове, высоты могут быть разными.

Простым тестом было бы загрузить большое изображение в браузере. Прочитайте высоту в конце тела, готовьте документ и загрузите его и посмотрите, что это за значения. (Обратите внимание, как только изображение в кэше, браузер будет иметь правильную высоту)

var img = document.getElementById("x"); 
 
console.log("inline:", x.height); 
 

 
$(function(){ console.log("ready:", x.height); }); 
 

 
window.addEventListener("load", function() { 
 
    console.log("load:", x.height); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="x" src="https://upload.wikimedia.org/wikipedia/commons/7/74/Earth_poster_large.jpg?ddddddd" />

Answer 2

Это может быть полезно, если у вас есть скрипт в отдельном файле, или если у вас есть отдельные файлы с другими ресурсами, которые вы хотите быть загружен первым.