Чим відрізняється метод JavaScript window.onload
від методу jQuery $(document).ready()
?
Подія ready
відбувається після завантаження HTML-документа, а подія onload
відбувається пізніше, коли весь вміст (наприклад, зображення) також буде завантажено.
Подія onload
є стандартною подією в DOM, в той час як подія ready
є специфічною для jQuery. Призначення події ready
полягає в тому, що вона повинна відбуватися якомога раніше після завантаження документа, щоб код, який додає функціональність елементам на сторінці, не чекав, поки завантажиться весь контент.
window.onload - це вбудована подія JavaScript, але оскільки її реалізація має "тонкі" нюанси в різних браузерах (Firefox, Internet Explorer 6, Internet Explorer 8 та Opera), jQuery надає подію document.ready
, яка абстрагується від них і спрацьовує, як тільки DOM сторінки готовий (не чекає зображень і т.д.).
$(document).ready
(зауважте, що це не document.ready
, який не визначений) - це функція jQuery, яка обгортає і забезпечує послідовність наступним подіям:
document.ondomcontentready
/ document.ondomcontentloaded
- нова подія, яка спрацьовує при завантаженні DOM документа (що може бути за деякий час до завантаження зображень і т.д.); знову ж таки, дещо відрізняється в Internet Explorer і в інших браузерахwindow.onload
(який реалізований навіть у старих браузерах), який спрацьовує при завантаженні всієї сторінки (зображень, стилів і т.д.)Застереження щодо використання $(document).ready()
з Internet Explorer. Якщо HTTP-запит буде перерваний до завантаження всього документа (наприклад, під час завантаження сторінки в браузер буде натиснуте інше посилання), то IE викличе подію $(document).ready
.
Якщо в коді події $(document).ready()
є посилання на DOM-об'єкти, існує ймовірність того, що ці об'єкти не будуть знайдені, і можуть виникнути помилки Javascript. Або захистіть свої посилання на ці об'єкти, або перенесіть код, який посилається на ці об'єкти, на подію window.load.
Мені не вдалося відтворити цю проблему в інших браузерах (зокрема, Chrome і Firefox)