Выполнение скрипта после загрузки страницу javascript и jquery
Что такое window.onload - выполнение скрипта после загрузки, рассмотрим window.onload на числом javascript + добавим windows onload jqueryЗагрузка скрипта после загрузки страницы.
Подробно о window.onload
Что такое window.onload
Иногда, происходит такое, что вы, вроде бы и написали все правильно, но скрипт... просто не работает. И непонятно почему.
Одна из причин - это загрузка скрипта раньше, чем самой страницы. Ваш скрипт - тупо не видит код ниже себя.
Для этого существует window.onloadwindow - объект.
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).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.