Включение файла js в HTML
Я включаю в свой HTML огромный файл javascript (500 КБ). Есть ли умный способ узнать, загружен ли он. Один из способов, который я могу придумать, - это иметь в конструкторе переменную для инициализации и информирования меня. Загрузка является асинхронной, и я не могу продолжить, пока не будут включены функции этого JS.
Спасибо
В настоящее время HTML имеет асинхронную загрузку, вероятно, потому, что файл js такой большой. Так почему вы хотите удалить эту функциональность?
Вы когда-нибудь использовали Microsoft Sharepoint? У них есть файлы JS такого размера! Вызвало некоторое недовольство наших представителей медленной телефонной связью ...
Его OpenLayers.js сжат до 500k Как загружать синхронно?
Загружать синхронно, как это сделано в ответе Оскара. Любой Javascript, который вы укажете ниже, будет выполнен только после загрузки этого файла.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
<SCRIPT LANGUAGE = "JavaScript" SRC = "filename">
</SCRIPT>
??
Ага. Это обычный метод. Мне нужно знать, сделано ли включение
Если вы используете этот метод, лучше всего помещать его не в заголовок, а после тега body вашей страницы, таким образом страница будет отображаться сначала, а только затем начнет загружать 500 КБ JavaScript, таким образом ваша страница будет видна быстро при медленных соединениях. .
Вы пробовали сжать файл javascript? Перенести некоторые функции в отдельные файлы Javascript и включить только необходимый javascript?
Используя jQuery, вы можете обрабатывать функцию обратного вызова, которая запускается при загрузке файла сценария:
$.getScript("yourScriptFile.js", function(){
// What to do when the script is loaded
});
Если вы уже не используете jQuery, это означает еще 15/30 КБ данных к вашим и без того огромным требованиям к скриптам.
Вы можете вызвать функцию в конце файла сценария, которая сообщит сценарию на странице, что он готов к использованию.
В качестве пояснения к ответу Оскара:
<script type='text/javascript' src='script.js'></script>
<script type='text/javascript'>
alert('the file has loaded!');
//Anything here will not be executed before the script.js was loaded
</script>
Также, если файл огромен, может быть лучше загрузить его после загрузки страницы, чтобы вы при медленных соединениях могли использовать страницу до ее загрузки:
<head> <script type='text/javascript' src='script.js'></script> </head> <body> Nothing here will be rendered until the script has finished loading </body>
Лучше:
<head> </head> <body> I will be rendered immidiatly </body> <script type='text/javascript' src='script.js'></script> </html>
Таким образом, пользователи быстро получают страницу и только после этого должны ждать функциональности javascript.
Возможно, вопрос можно сформулировать еще раз: как узнать, что мой скрипт загружен на html-страницу? Размещая скрипт внизу страницы, вы убедитесь, что все DOM-элементы доступны вашему скрипту. Если вы хотите узнать, доступен ли ваш скрипт, вы должны проверить, доступна ли функция для запуска. Может быть, этот конструктор поможет:
function Wait(what,action,id){
var _x = this,
rep = document.getElementById('report'),
cnt = 0,
timeout = 5,
interval = 100;
_x.id = id;
if (!(what instanceof Function)) {
return true; //or say something about it
}
function dowait() {
cnt += interval;
if (what())
{
clearInterval(_x.iv);
action();
return true;
}
if (cnt>(timeout*1000))
{
clearInterval(_x.iv);
//[do some timeout-action]
return true;
}
}
_x.iv = setInterval(dowait,interval);
}
Конструктор принимает функцию (возвращающую логическое значение) в качестве первого аргумента. Нравиться
function(){return document.getElementById('someelement').innerHTML = '';}
Поэтому, если вы включите это перед своим javascript, вы можете сделать что-то вроде:
var testfn =
function(){return document.getElementById('someElement').innerHTML = '';},
callback =
function(){alert('someElement is empty')},
dummy = null;
window.onload=function(dummy=new Wait(testfn,calllback);
Если вы не можете продолжить работу без загрузки файла, зачем загружать его асинхронно?