Блог

Главная - Вопросы по программированию - Как обеспечить загрузку файлов Javascript после запуска прослушивателя событий?

Как обеспечить загрузку файлов Javascript после запуска прослушивателя событий?

#javascript #html

Вопрос:

В настоящее время у меня есть прослушиватель событий, который прослушивает, чтобы что-то сработало. Я бы хотел, чтобы событие сработало перед попыткой загрузки файла js. Прямо сейчас загружается JavaScript, а затем api готов. Как я могу полностью завершить список событий до того, как main.js загружается файл?

     <head>
        <title>Default</title>

        <script>document.addEventListener(apikey,function () {
            console.log("ready");
            });
        </script>
        <script src="./js/main.js"></script>
        <script>console.log("js loaded")</script>       
       
    </head>

Ответ №1:

Удалите тег сценария, чтобы main.js.

Внутри функции прослушивателя событий создайте и добавьте тег сценария в документ:

Ваш код должен выглядеть так:

 <head>
  <title>Default</title>
  <script>
    document.addEventListener(apikey, function() {
      const myscript = document.createElement('script');
      myscript.src = './js/main.js';
      document.body.appendChild(myscript);
    });
  </script>
  <script>
    console.log("js loaded")
  </script>
</head>

Ответ №2:

Вы можете сделать что-то вроде этого:

 <head>
    <link href="./js/main.js" rel="preload" as="script">

    <script>
        async function runScript(src) {
            let script = document.createElement('script');
            script.src = src;
            document.head.append(script);
        }
    
        document.addEventListener(apikey, () => {
            runScript('./js/main.js');
        });
    </script>
</head>

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

Совместимость с браузером: предварительная загрузка.

Метки: