Можно ли дождаться загрузки всех файлов javascript до выполнения javascript-кода?

У нас есть несколько файлов JavaScript, которые мы загружаем в нижней части главной страницы. Однако у меня есть ситуация, когда мне нужно выполнить JavaScript до того, как будут загружены другие сценарии. Можно ли дождаться загрузки всех файлов JavaScript и выполнить код JavaScript?

Я думал, что $(document).ready() сделал это, но, как оказалось, это не так. Конечно, мы можем перемещать файлы script снизу вверх, но мне интересно, возможно ли, что я хочу.

Ответы

Ответ 1

Вы можете использовать

$(window).on('load', function() {
    // your code here
});

Которая будет ждать загрузки страницы. $(document).ready() ждет, пока DOM не будет загружен

Ответ 2

Вы можете использовать .getScript() и запускать код после его загрузки:

 $.getScript("my_lovely_script.js", function(){

    alert("Script loaded and executed.");
    // here you can use anything you defined in the loaded script

 });

Вы можете найти более подробное объяснение здесь: Как включить файл JavaScript в другой файл JavaScript?

Ответ 3

Вы можете использовать атрибут <script> defer. Он указывает, что script будет выполнен, когда страница закончит разбор.

<script defer src="path/to/yourscript.js">

Хорошая статья об этом: http://davidwalsh.name/script-defer

Поддержка браузера выглядит довольно хорошо: http://caniuse.com/#search=defer

Ответ 4

Немного расширив ответ @Eruant,

$(window).on('load', function() {
    // your code here
});

Очень хорошо работает с async и defer при загрузке скриптов.

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

<script src="/js/script1.js" async defer></script>
<script src="/js/script2.js" async defer></script>
<script src="/js/script3.js" async defer></script>

Просто убедитесь, что script1 не вызывает функции из script3 до $(window).on('load' ..., обязательно вызывайте их внутри события window load.

Подробнее об асинхронном/отложенном здесь.