异步加载脚本

异步加载的几种解决方案：

//this function will work cross-browser for loading scripts asynchronouslyfunction 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内容的加载。它还避免了必须异步加载每个所需脚本的问题。

如果您有一个并不常用的特别花哨的交互功能，并且需要某种较大的脚本，那么避免在需要之前加载该特定脚本（延迟加载）会很有用。

对于可以使用现代功能（例如

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中断。