Загрузка JavaScript
Добавить в избранное
В JavaScript это событие может применяться для запуска определенной функции, когда страница отображается полностью. Его также можно использовать для проверки типа и версии браузера посетителя. Мы можем проверить, какие файлы cookie использует страница, используя атрибут onload .
В HTML атрибут onload срабатывает, когда объект загружен. Назначение этого атрибута — выполнение скрипта при загрузке связанного элемента.
В HTMLатрибут onload обычно используется с элементом
Разница между document.onload и window.onload заключается в следующем: document.onload срабатывает перед загрузкой изображений и другого внешнего контента. Он запускается до window.onload . В то время как window.onload срабатывает при загрузке всей страницы, включая файлы CSS, файлы сценариев, изображения и т. д.
Синтаксис
window.onload = fun()
Давайте разберемся в этом событии на нескольких примерах.
Пример 1
В этом примере есть элемент div высотой 200 пикселей и шириной 200 пикселей. Здесь мы используем window.onload() для изменения цвета фона, ширины и высоты элемента div после загрузки веб-страницы.
Цвет фона установлен на «красный» , а ширина и высота установлены на 300 пикселей каждый.
<html>
<head>
<title>Document</title>
<style>
#bg {
width: 200px;
height: 200px;
border: 4px solid blue;
}
</style>
<script>
window.onload = function() {
document.querySelector("#bg").style.backgroundColor = "red";
document.querySelector("#bg").style.width = "300px";
document.querySelector("#bg").style.height = "300px";
}
</script>
</head>
<body>
<div id="bg"></div>
</body>
</html>
Пример 2
В этом примере мы реализуем простую анимацию, используя свойства объекта DOM и функции javascript. Мы используем функцию JavaScript querySelector() для получения объекта DOM, а затем присваиваем этот объект глобальной переменной.
<html>
<head>
<title>Document</title>
<script>
let img = null;
function init() {
img = document.querySelector("#myimg");
img.style.position = 'relative';
img.style.left = '50px';
}
function moveRight() {
img.style.left = parseInt(
img.style.left) + 100 + 'px';
}
window.onload = init;
</script>
</head>
<body>
<form>
<img id="myimg" src="train1.png" />
<input type="button" value="старт" onclick="moveRight();" />
</form>
</body>
</html>
Пример 3
Это простой пример использования HTML- атрибута onload с функцией, определенной в JavaScript. В этом примере функция alert() вызывается при каждом обновлении документа.
<html>
<head>
<title>Document</title>
<script>
function fun() {
alert("Привет мир!");
}
</script>
</head>
<body onload="fun()">
<p>я страница.</p>
</body>
</html>