У нас есть несколько файлов JavaScript, которые мы загружаем в нижней части главной страницы. Однако у меня есть ситуация, когда мне нужно выполнить JavaScript до того, как будут загружены другие сценарии. Можно ли дождаться загрузки всех файлов JavaScript и выполнить код JavaScript?
Я думал, что $(document).ready() сделал это, но, как оказалось, это не так. Конечно, мы можем перемещать файлы script снизу вверх, но мне интересно, возможно ли, что я хочу.
Вы можете использовать
$(window).on('load', function() {
// your code here
});
Которая будет ждать загрузки страницы. $(document).ready() ждет, пока DOM не будет загружен
Вы можете использовать .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?
Вы можете использовать атрибут <script> defer. Он указывает, что script будет выполнен, когда страница закончит разбор.
<script defer src="path/to/yourscript.js">
Хорошая статья об этом: http://davidwalsh.name/script-defer
Поддержка браузера выглядит довольно хорошо: http://caniuse.com/#search=defer
Немного расширив ответ @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.
Подробнее об асинхронном/отложенном здесь.