Разница между событиями DOMContentLoaded и load

Опубликовано: 2 Декабря, 2021

Эти два события DOMContentLoaded и load используются для проверки того, что веб-страница полностью загрузилась. Тем не менее, есть некоторые факторы, которые определяют предпочтение одного перед другим. Давайте посмотрим на них обоих и поймем, как они работают.

Событие DOMContentLoaded запускается после загрузки основного HTML-документа и его анализа. Это событие не дожидается завершения загрузки надстроек, таких как таблицы стилей, субкадры и изображения / картинки.

Синтаксис :

 document.addEventListener ("DOMContentLoaded", function (e) {
  console.log («Страница GfG загружена»);
});

Пример 1:

 <!DOCTYPE>
 < html >
 
< head >
    < title >
        Output of DOMContentLoaded and Load events
    </ title >
 
    < script type = "text/javascript" >
        document.addEventListener("DOMContentLoaded", function(e) {
            console.log("GfG page has loaded");
        });
    </ script >
 </ head >
 
< body >
    < img src =
 " https://media.geeksforgeeks.org/wp-content/uploads/20190328185307/gfg28.png "
         style = "align-content: center" >
 </ body >
 
</ html > 

Выход:

Здесь, в выходных данных, можно увидеть, что в окне журнала консоли отображается сообщение, которое означает завершение загрузки DOM веб-страницы.

Преимущества использования события DOMContentLoaded:

Это помогает улучшить взаимодействие с пользователем, поскольку отображает сообщения или контент намного быстрее.
На загрузку страницы уходит меньше времени.

событие load выполняет свое выполнение иначе. Это событие завершается после загрузки всех компонентов, то есть иерархии DOM, а также связанных функций веб-страницы, таких как файлы CSS, файлы JavaScript, изображения / изображения и внешние ссылки. По сути, событие загрузки помогает узнать, когда страница полностью загружена.

Синтаксис :

 document.addEventListener ("load", function (e) {
  console.log («Страница полностью загрузилась.»);
});

Пример 2:

 <!DOCTYPE html>
 < html >
 
< head >
    < title >
        Output of DOMContentLoaded and Load events
    </ title >
 
    < script type = "text/javascript" >
        document.addEventListener("load", function(e) {
            console.log("GfG page has loaded completely");
        });
    </ script >
 </ head >
 
< body >
    < img src =
 " https://media.geeksforgeeks.org/wp-content/uploads/20190328185307/gfg28.png "
         style = "align-content: center" >
 </ body >
 
</ html > 

Выход :

Преимущества использования события загрузки:

Это событие помогает узнать, когда загружены все компоненты веб-страницы.

Technical Scripter Разница между Picked HTML HTML-Misc

Разница между событиями DOMContentLoaded и load

РЕКОМЕНДУЕМЫЕ СТАТЬИ