Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

Что такое window.onload, рассмотрим window.onload на числом javascript + добавим windows onload jquery

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

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

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

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

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

    window - объект.

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

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

    Данную конструкцию, можно использовать как на странице, таким образом:

    <script>

    window.onload = function() {

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

    };

    </script>

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

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

    window.onload = function() {

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

    };

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

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

    object.onload

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

    4). onload в HTML

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

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

  2. Использование 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 :

  3. Использование (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.


Вас может еще заинтересовать список тем : #JS | #JS_EVENTS | #JS_JQUERY |
Последняя дата редактирования : 2020-11-04 18:10
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
windows onload window onload windows onload js js window onload window onload function windows onload function windows onload javascript window onload javascript jquery window onload windows onload jquery window document onload script window onload window onload addeventlistener window onload не работает js window onload function

Последние комментарии :
Марат :
03/12/2020 08:47
Давно пользуюсь данным скриптом, который написал еще при царе горохе!За десять лет изменилось то, что и при…
подробнее.
Ольга Попова :
02/12/2020 11:42
Я уж было обрадовалась, а у меня не…
подробнее.
Марат :
23/11/2020 07:38
Приходите ещё!
подробнее.
Лило :
23/11/2020 06:34
Благодарю, удобно
подробнее.
Марат :
15/11/2020 01:57
Здесь отвечал...1) Есть вот комментарии от вконтактае, очень простые 2)Такое же есть от мордокниги, 3) смотрите…
подробнее.