Метод 1: стандартный JavaScript — событие загрузки окна
Самый простой способ вызвать функцию при загрузке страницы — использовать событие загрузки окна. Это событие возникает, когда все ресурсы страницы, такие как изображения и таблицы стилей, завершили загрузку. Вот пример фрагмента кода:

window.addEventListener('load', function() {
  // Your function code here
});

Метод 2: стандартный JavaScript — событие готовности документа
Если вы хотите выполнить свою функцию, как только HTML-документ будет проанализирован и готов, вы можете использовать событие готовности документа. В отличие от события загрузки окна, это событие срабатывает, когда DOM полностью создан, даже если внешние ресурсы все еще загружаются. Вот как это можно реализовать:

document.addEventListener('DOMContentLoaded', function() {
  // Your function code here
});

Метод 3: jQuery — событие готовности документа
Если вы уже используете jQuery в своем проекте, вы можете использовать его упрощенный синтаксис для достижения того же результата, что и событие готовности документа в стандартном JavaScript. Вот пример:

$(document).ready(function() {
  // Your function code here
});

Метод 4: тег встроенного сценария
Еще один простой способ вызвать функцию при загрузке страницы — использовать тег встроенного сценария в HTML-документе. Вы можете разместить тег скрипта в конце раздела body, чтобы гарантировать, что функция будет вызвана после обработки всех элементов. Вот пример:

<script>
  // Your function code here
</script>

Метод 5. Фреймворки JavaScript (React, Angular, Vue)
Если вы работаете с популярными фреймворками JavaScript, такими как React, Angular или Vue, они предоставляют свои собственные механизмы для вызова функций при загрузке страницы. Например, в React вы можете использовать хук useEffect с пустым массивом зависимостей. Вот пример использования React:

import React, { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    // Your function code here
  }, []);
  // Rest of the component code
}

Метод 6: самовыполняющаяся анонимная функция
Вы также можете обернуть свою функцию внутри самовыполняющейся анонимной функции. Этот подход немедленно вызывает функцию, гарантируя, что она запустится сразу после загрузки сценария. Вот пример:

(function() {
  // Your function code here
})();

<img src="image.jpg" onload="myFunction()" alt="Image">

В этой статье мы рассмотрели семь различных способов вызова функции при загрузке веб-страницы. От стандартного JavaScript до популярных фреймворков и встроенных обработчиков событий — у вас есть множество вариантов на выбор в зависимости от требований вашего проекта. Не забудьте выбрать метод, который лучше всего соответствует вашим потребностям и повышает интерактивность вашего веб-сайта. Приятного кодирования!