$(document).ready vs $(window).load vs window.onload


Данный материал является вольным переводом статьи:
RITURAJ RATAN $(document).ready vs $(window).load vs window.onload

$(document).ready

Длительное время мы использовали '$(document).ready' работая с jQuery. Написанный таким образом код начнёт выполняться сразу после того, как будет готов DOM, за исключением картинок. Указанный код будет выполняться непосредственно после готовности DOM, не дожидаясь полной загрузки изображений. Вызов $(document).ready несколько раз приведет к последовательному исполнению вызовов друг за другом. Существуют ещё несколько вариантов записи.


//Вариант 1
$(document).ready(function() {
/** начнёт работу тогда, когда будет готов DOM, за исключением картинок **/
// ваш код
});

//Вариант 2
$(function() {
/** начнёт работу тогда, когда будет готов DOM, за исключением картинок **/
//ваш код
});

//Вариант 3
$(document).on('ready', function(){
/** начнёт работу тогда, когда будет готов DOM, за исключением картинок **/
//ваш код
});

//Вариант 4
jQuery(document).ready(function(){
/** начнёт работу тогда, когда будет готов DOM, за исключением картинок **/
//ваш код
});

$(window).load

Если мы говорим о $(window).load то код, написанный внутри такой конструкции, начнёт работу когда будет готов весь DOM включая изображения. Такой вызов подойдёт если мы хотим работать с изображениями (расчёт размеров изображения). Данный вызов, как и предыдущий является jQuery событием. Если на нашей странице есть изображения, то сначала мы дождёмся загрузки их всех, а потом будет вызван код.


$(window).load(function() {
/** код будет запущен когда страница будет полностью загружена, включая все фреймы, объекты и изображения **/
});

И ещё кое-что, не путайте событие window load с jQuery методом ajax load.


// ajax метод загрузки в jQuery
$("#elementid").load( "data.html" );

window.onload

Событие onload является стандартным событием в DOM, а описанные выше решения работают только при наличии библиотеки jQuery. Данный вариант имеет такую же функциональность как $(window).load, но является встроенным JavaScript событием. Событие onload происходит, когда объект был загружен. Мы можем сделать такой вызов непосредственно из тега. Например, разместив его в теге изображения и как только оно будет загружено произойдёт вызов события.

Такой вызов возможен как в HTML так и в JS.

В HTML


<element onload="myFunction"></element>

В JS


object.onload=function(){/**ваш код**/};// объектом здесь может быть window, body и т.д.

Alert “вызов после загрузки body” будет вызван сразу после того как загрузится body

В HTML


<!-- после загрузки body будет вызвана myFunction -->
<body onload="myFunction()">

В JavaScript


// myFunction() будет вызвана после body load
function myFunction(){
alert("вызов после загрузки body");
}

Если рассмотреть пример работы onload после загрузки изображения, то выглядеть все будет как показано ниже

В HTML


<!--после загрузки изображения будет вызвана myImageFunction() -->
<img src="image path src" onload="myImageFunction()">

В JavaScript


// myFunction() будет вызвана после загрузки изображения
function myImageFunction(){
alert("вызов после загрузки изображения");
}