HTML атрибут событий onload

Значение и применение

Атрибут событий onload позволяет задать срабатывание скрипта после завершения полной загрузки страницы (включая изображения, внешние таблицы стилей и внешние скрипты). Также может быть использован и на некоторые HTML элементы, указанные ниже.

Поддержка браузерами

Спецификации: uievents, multipage, multipage

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьapi.HTMLElement.load_event
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
load event	✓1	✓12	✓1	✓8	✓1.3	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1

поддерживается с ограничениями нет поддержки нет данных≤31 — не позднее версии 31

Синтаксис

HTML

<element onload = "script" >

Пример использования

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Событие onload</title>
  </head>
  <body>
    <img src="/images/smile.png" alt="smile" onload="LoadInfo()" />
    <p id="test"></p>
    <script>
      function LoadInfo() {
        /* функция, которая выводит сообщение в элементе с определённым id */
        document.getElementById("test").innerHTML = "Изображение успешно загружено!";
      }
    </script>
  </body>
</html>

Загрузка изображения: попробуйте сами

index.html

HTML

<img src="assets/smile.png" alt="shishka">
<p id="test"></p>

main.js

JavaScript

function LoadInfo() {
  document.getElementById("test").innerHTML = "Изображение успешно загружено!";
}

// Подключаем обработчик перед повторной загрузкой, включая случай кешированного изображения.
const image = document.querySelector("img");
const imageSource = image.getAttribute("src");
image.removeAttribute("src");
image.addEventListener("load", LoadInfo);
image.src = imageSource;

Отличия HTML 4.01 от HTML 5

Нет.

Поддерживаемые теги

Элемент <body>, <frame>, <frameset>, <iframe>, <img>, <input type = "img">, <link>, <script> и <style>.