Выполнение скрипта после загрузки страницу javascript и jquery

Загрузка скрипта после загрузки страницы.

Подробно о window.onload

1. Что такое window.onload
2. Использование window.onload
3. Использование (window).load JQuery

Что такое window.onload

Иногда, происходит такое, что вы, вроде бы и написали все правильно, но скрипт... просто не работает. И непонятно почему.

Одна из причин - это загрузка скрипта раньше, чем самой страницы. Ваш скрипт - тупо не видит код ниже себя.

Для этого существует window.onload

window - объект.

onload - это "событие". Иногда, на просторах интернета можно встретить разное название для этого события, но "onload" - это "Event", а в переводе - это событие.

1). Используем window.onload на странице :

Использовать window.onload можно самым простым способом, размещаем данный скрипт на странице и после загрузки страницы, вы увидите сообщение о том "скрипт выполнился после загрузки страницы"

<script>

window.onload = function() {

alert('Страница загружена');

};

</script>

2). Используем window.onload в отдельном файле :

Если у вас подключенный скрипт, то теги <script> и </script> не нужны.

window.onload = function() {

здесь помещаем все, что угодно...

};

3). Используем onload и object в качестве объекта загрузки :

object может быть например body или window, естественно к этому объекту, сперва нужно обратиться.


object.onload

object.onload=function(){/**код**/};

4). onload в HTML

В качестве атрибута onload, возможно использование в HTML :

<element onload="myFunction"></element>




Использование window.onload

Давайте попробуем создать эмуляцию window.onload, как это работает в реальном времени.

Создадим скрипт и разместим его тут на странице:

<script>

window.onload = function() {

alert('Страница загружена');

// к этому моменту страница загружена

alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);

};

</script>

<img id="img" src="https://dwweb.ru/__a-data/__all_for_scripts/__examples/js/onload/onload.jpg">

Нажмите кнопку window.onload :

window.onload



Использование (window).load JQuery

Несколько вариантов для запуска вашего скрипта, при использовании JQuery


$(window).load(function() {

/** код запустится, когда страница будет полностью загружена на 100% **/

});

+

//Вариант 1

$(document).ready(function() {

/** код запустится, когда будет готов DOM, исключая картинки **/

// ваш код

});

//Вариант 2

$(function() {

/** код запустится, когда будет готов DOM, исключая картинки **/

//ваш код

});

//Вариант 3

$(document).on('ready', function(){

/** код запустится, когда будет готов DOM, исключая картинки **/

//ваш код

});

//Вариант 4

jQuery(document).ready(function(){

/** код запустится, когда будет готов DOM, исключая картинки **/

//ваш код

});

И!

Не путаете window load jQuery с методом ajax load.