Блог

Для веб-сайта ресторана мне нужно работать с модулем бронирования, который сложно загрузить.
Для загрузки скрипта требуется целых 4 секунды, и это при подключении Ethernet со скоростью 380 Мбит / с., над которым я работаю. Для того, чтобы веб-сайт заработал, требуется от 4 до 6 секунд.

Это код, который я должен реализовать.

 <div id="[reservation-company-name]-booknow">
    <script type="text/javascript" src="//www.[reservation-company-name].com/WID/Widget/Cors"></script>
    <script>bookNow({companyID: '[numbers]',target: '#[reservation-company-name]-booknow',language: 'NL'});</script>
</div>
  

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

 $(window).load(function() {
    $("#[reservation-company-name]-booknow").append("<script type='text/javascript' src='//www.[reservation-company-name].com/WID/Widget/Cors'></script><script>bookNow({companyID: '[numbers]',target: '#[reservation-company-name]-booknow',language: 'NL'});</script>
});
  

Проблема, однако, в том, что второй скрипт с функцией bookNow запускается, когда первый скрипт все еще загружается. Это приводит к ошибке, и виджет не загружается должным образом.
Виджет загрузится, когда я установлю тайм-аут для запуска второго скрипта, но при разных скоростях соединения невозможно установить правильное время для тайм-аута.

Я искал здесь, в Stackoverflow, как дождаться полной загрузки динамически загружаемого скрипта перед выполнением функции. Большинство материалов, которые я нашел, не касались динамически загружаемых скриптов или касались асинхронности и отсрочки, что у меня не сработало.

Что делать?

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

В Jquery есть хорошая функция getScript, которая загружает скрипт, а затем запускает функцию. Именно то, что я искал.

 $(window).load(function() {
    var url = "//www.[reservation-company-name].com/WID/Widget/Cors";
    $.getScript(url, function() {
        $('#[reservation-company-name]-booknow').append("<script>bookNow({companyID: '686937',target: '#[reservation-company-name]-booknow',language: 'NL'});</script>");
    });
 });