异步加载脚本回调 [英] Asynchronous Script Loading Callback

问题描述

  

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

我创建基础上，谷歌分析异步脚本马蒂亚斯Bynens优化短短功能说竟把以下内容：

 异步功能（SRC）{
  变种D =文档，T ='脚本'，
      O = d.createElement（T）
      S = d.getElementsByTagName（t）的[0];
  o.src ='//'+ SRC;
  s.parentNode.insertBefore（O，S）;
}
 

这个伟大的工程，我已经用它为几个不同的脚本已经启动

  //疯狂的鸡蛋
异步（'dnn506yrbagrg.cloudfront.net/pages/scripts/XXXXX/XXXXX.js？'+ Math.floor（新的Date（）的getTime（）/ 3600000））;//用户音色
变种uvOptions = {};
异步（'widget.uservoice.com/XXXXX.js'）;// 谷歌分析
变种_gaq = [['_setAccount'，'UA-XXXXX-XX']，['_setDomainName'，'coachup.com']，['_trackPageview']];
异步（'google-analytics.com/ga.js'）;//条纹
异步（'js.stripe.com/v1'）;
 

问题是当我遇到一个需要它的加载后调用的脚本：

  //快搞
异步（'snapabug.appspot.com/snapabug.js'）;
SnapABug.init（'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX'）;
 

所以，我想我会这变成了将被用作这样一个回调函数：

 异步（'snapabug.appspot.com/snapabug.js'，函数（）{
    SnapABug.init（'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX'）;
}）;
 

我没想到的是，这将是我很难做，但它已经变成了这样。

我的问题是什么是添加一个回调没有过于复杂的code最有效的方式。

  

见的jsfiddle： http://jsfiddle.net/JamesKyle/HQDu6/

解决方案

RASG 获得的 http://stackoverflow.com/a/3211647/982924

异步函数的回调：

 函数异步（U，C）{
  变种D =文档，T ='脚本'，
      O = d.createElement（T）
      S = d.getElementsByTagName（t）的[0];
  o.src ='//'+ U;
  如果（C）{o.addEventListener（'负荷'，函数（E）{C（空，E）;}，FALSE）; }
  s.parentNode.insertBefore（O，S）;
}
 

用法：

 异步（'snapabug.appspot.com/snapabug.js'，函数（）{
    SnapABug.init（'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX'）;
}）;
 

  

的jsfiddle

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

I've created a short function based on Mathias Bynens Optimization of the Google Analytics asynchronous script that goes as following:

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);
}

This works great and I've already started using it for several different scripts

// 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');​

The problem comes when I encounter a script that needs to be called after it's loaded:

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

So I figured I'd turn this into a callback function that would be used as so:

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

I did not expect that this would be difficult for me to do but it has turned out that way.

My question is what is the most efficient way to add a callback without overcomplicating the code.

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

解决方案

Thanks RASG for http://stackoverflow.com/a/3211647/982924

Async function with callback:

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);
}

Usage:

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

jsFiddle

这篇关于异步加载脚本回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！