Пара решений для асинхронной загрузки:
//this function will work cross-browser for loading scripts asynchronously
function loadScript(src, callback)
{
var s,
r,
t;
r = false;
s = document.createElement('script');
s.type = 'text/javascript';
s.src = src;
s.onload = s.onreadystatechange = function() {
//console.log( this.readyState ); //uncomment this line to see which ready states are called.
if ( !r && (!this.readyState || this.readyState == 'complete') )
{
r = true;
callback();
}
};
t = document.getElementsByTagName('script')[0];
t.parentNode.insertBefore(s, t);
}
Если у вас уже есть jQuery на странице, просто используйте:
$.getScript(url, successCallback)*
Кроме того, возможно, что ваши сценарии загружаются / выполняются до завершения загрузки документа, а это означает, что вам нужно подождать document.ready, прежде чем события могут быть связаны с элементами.
Невозможно точно сказать, в чем ваша проблема, не видя код.
Самое простое решение - сохранить все ваши скрипты встроенными в нижней части страницы, чтобы они не блокировали загрузку HTML-контента во время выполнения. Это также позволяет избежать асинхронной загрузки каждого необходимого сценария.
Если у вас есть необычное взаимодействие, которое не всегда используется, для которого требуется какой-то более крупный скрипт, может быть полезно избегать загрузки этого конкретного скрипта, пока он не понадобится (отложенная загрузка).
* скрипты, загруженные с $.getScript, вероятно, не будут кэшироваться
Для тех, кто может использовать современные функции, такие как объект Promise, функция loadScript стала значительно проще:
function loadScript(src) {
return new Promise(function (resolve, reject) {
var s;
s = document.createElement('script');
s.src = src;
s.onload = resolve;
s.onerror = reject;
document.head.appendChild(s);
});
}
Имейте в виду, что эта версия больше не принимает аргумент callback, поскольку возвращаемое обещание будет обрабатывать обратный вызов. То, что раньше было loadScript(src, callback), теперь будет loadScript(src).then(callback).
Это дает дополнительный бонус: он способен обнаруживать и обрабатывать сбои, например, можно позвонить ...
loadScript(cdnSource)
.catch(loadScript.bind(null, localSource))
.then(successCallback, failureCallback);
... и он будет корректно обрабатывать сбои CDN.