Недавно я увидел, что вы можете использовать
$('document').ready(function() {
//Do Code
});
или
$('window').load(function() {
//Do Code
});
для jQuery.
Однако они кажутся мне одинаковыми! Но ясно, что нет.
Итак, мой вопрос: какой из них следует использовать для создания веб-сайта на основе анимации и асинхронизации? А также, какой из двух лучше всего использовать?
Спасибо.
$('document').ready запускает код, когда DOM готов, но не когда загружена сама страница, то есть сайт не был раскрашен, а содержимое, как изображения, не было загружено.
$(window).load запускает код, когда страница была расписана, и все содержимое загружено. Это может быть полезно, когда вам нужно получить размер изображения. Если изображение не имеет стиля или ширины/высоты, вы не можете получить его размер, если не используете $(window).load.
Ну, в первую очередь, вы можете захотеть использовать "готовое" событие, которое вы можете обработать следующим образом:
$().ready(function() {
...
});
Или, более лаконично и идиоматично:
$(function() {
...
});
Обработчик "load" действительно относится к реальному событию и может обрабатываться несколькими различными типами элементов: <img> и <iframe>, например. Событие "load" на уровне документа или окна происходит, когда загружаются все ресурсы страницы. Однако (в некоторых браузерах) "готовое" событие происходит, когда страница DOM готова, но, возможно, перед вещами типа <img>.
Другой вариант - просто поместить теги <script> в самый конец <body> или даже после <body>. Таким образом, скрипты имеют всю DOM для работы, но вам не нужно беспокоиться о каких-либо событиях, чтобы это знать.