异步脚本加载回调

Question

http://jsfiddle.net/JamesKyle/HQDu6/

我创建了一个基于Mathias Bynens优化的Google Analytics异步脚本的简短函数,如下所示:

function async(src) {
  var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
  o.src = '//' + src;
  s.parentNode.insertBefore(o, s);
}

这很好用,我已经开始将它用于几个不同的脚本

// Crazy Egg
async('dnn506yrbagrg.cloudfront.net/pages/scripts/XXXXX/XXXXX.js?' + Math.floor(new Date().getTime() / 3600000));

// User Voice
var uvOptions = {};
async('widget.uservoice.com/XXXXX.js');

// Google Analytics
var _gaq = [['_setAccount', 'UA-XXXXX-XX'], ['_setDomainName', 'coachup.com'], ['_trackPageview']];
async('google-analytics.com/ga.js');

// Stripe
async('js.stripe.com/v1');?

当我遇到需要在加载后调用的脚本时出现问题:

// Snap Engage
async('snapabug.appspot.com/snapabug.js');
SnapABug.init('XXXXX-XXXXX-XXXXX-XXXXX-XXXXX');

所以我想我会把它变成一个回调函数,可以这样使用:

async('snapabug.appspot.com/snapabug.js', function() {
    SnapABug.init('XXXXX-XXXXX-XXXXX-XXXXX-XXXXX');
});

我没想到这对我来说很难做到,但结果却是这样.

我的问题是什么是添加回调的最有效方法,而不会使代码过于复杂.

请参阅jsfiddle:http://jsfiddle.net/JamesKyle/HQDu6/

Answer 1

感谢RASG for /sf/answers/224815321/

带回调的异步函数:

function async(u, c) {
  var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
  o.src = '//' + u;
  if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
  s.parentNode.insertBefore(o, s);
}

用法:

async('snapabug.appspot.com/snapabug.js', function() {
    SnapABug.init('XXXXX-XXXXX-XXXXX-XXXXX-XXXXX');
});

的jsfiddle

Answer 2

James Kyle的回答并未考虑IE9.这是我在评论中提出的链接中找到的代码的修改版本.修改var baseUrl,以便它可以相应地找到脚本.

async function loadAsync(src) {
    const script = document.createElement('script');
    script.src = src;
    return new Promise((resolve, reject) => {
        script.onreadystatechange = function () {
            if (script.readyState === 'loaded' || script.readyState === 'complete') {
                script.onreadystatechange = null;
                resolve(true);
            }
        };
        document.getElementsByTagName('head')[0].appendChild(script);
    });
}

利用:

  loadAsync(`https://....js`).then(_ => {
    //  ... script loaded here
  })

Answer 3

其他答案效果很好，但不是超级可读或需要承诺。这是我的两分钱：

function loadScript(src, callback) {
    var script = document.createElement('script');
    script.setAttribute('src', src);
    script.addEventListener('load', callback);
    document.head.appendChild(script);
},