С элементами страницы нельзя манипулировать до тех пор, пока документ не “готов”. Библиотека jQuery позволяет определить это состояние готовности.

Код внутри $( document ).ready() будет выполняться немедленно после того, как объектная модель готова (DOM)  к использованию.

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

$( window ).load(function() { ... }) будет работать только в том случае, если Вы настроили её перед тем, как элемент был полностью загружен, иначе, ничего не произойдет.  Подобного не происходит в $(document).ready().

// Данная функция выполняется, когда объектная модель готова к использованию:

$( document ).ready(function() {
    console.log( "Объектная модель готова к использованию!" );
});

Опытные разработчики иногда используют короткую форму записи $() для $(document).ready().

// Короткую форму записи $( document ).ready()
$(function() {
    console.log( "Объектная модель готова к использованию!" );
});

Вы также можете вызывать именованную функцию в $(document).ready()

// Функция, выполняемая, когда объектная модель документа готова к использованию
 
function readyFn( jQuery ) {
    // Ваш код
}
 
$( document ).ready( readyFn );

// или:

$( window ).load( readyFn );

Использование $(document).ready() и псевдонима $ при написании безотказного кода jQuery не полагаясь на глобальные псевдонимы:

jQuery(function($) {
  // Ваш код..
});

Подробнее о обработчике событий .ready() вы можете почитать в статье Установка обработчика готовности дерева DOM .ready().