Как правильно запустить JS после загрузки страницы - PullRequest
Новая
       36

Как правильно запустить JS после загрузки страницы

0 голосов
/ 16 июня 2019

Работая над очисткой моих ошибок и устаревших веб-страниц,
Я столкнулся с этим предупреждающим сообщением:

jquery-3.4.1.js: 9725
[Устаревание] Синхронный XMLHttpRequest в основном потоке устарел из-за его пагубных последствий для конечного пользователя.
Для получения дополнительной помощи, проверьте https://xhr.spec.whatwg.org/.

Я хочу правильно обрабатывать JavaScript правильно:

  1. Храните сценарии и ссылки вавтономная область, т.е.
  2. Запуск после загрузки страницы


Но я не знаю, как:

  1. Преобразовать из встроенных JS-ссылок в JS-файл
  2. Как должен выглядеть внутренний формат JS



I 'мы использовали: 

<head>

    <script>$(document).ready(function () { $('<script/>', { type: 'text/javascript', src: 'assets/js/set-background.js' }).appendTo('head'); }); </script>

</head>

С JS-файлом: 


...
var body = document.getElementsByTagName("body")[0];
body.className += " change-" + idx;
...

Предупреждение не появляется, если скрипт: 


<body>
    ...
    <script src="assets/js/set-background.js"></script>
    ...
</body>



И попробовал, 

<head>

    <script>$(function(){'assets/js/set-background.js'}) </script>

</head>

<head>

    <script type="text/javascript" src="assets/js/set-background.js"></script>

</head>

<body class="container" onload="assets/js/set-background.js">



Я видел обсуждения других разработчиков:

  1. javascript - Как запустить функцию при загрузке страницы?- Переполнение стека
  2. Чистый JavaScript-эквивалент jQuery's $ .ready () - как вызвать функцию, когда для нее готова страница / DOM - Переполнение стека
  3. javascript - $ (document). Уже эквивалентен без jQuery - переполнение стека
  4. Как запустить функцию в jquery - переполнение стека


И я также читал:

  1. Событие onload
  2. .load ()|Документация по jQuery API

1 Ответ

2 голосов
/ 16 июня 2019

Это предупреждение не связано с загрузкой страницы. Проблема в том, что где-то вы использовали XMLHttpRequest с параметром 'async' false.

Это нехорошо из-за поведения цикла событий JS (одиночный поток), поэтому, если загрузка запрошенных данных занимает больше времени, страница полностью зависает: никаких щелчков, прокрутки, других функций JS, ничего!

Чтобы решить эту проблему, вы должны использовать асинхронный XMLHttpRequest или Web Workers .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...