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

问题描述

<块引用>

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

我创建了一个基于 Mathias Bynens Google Analytics 异步脚本优化 如下:

function async(src) {var d = 文档，t = '脚本'，o = d.createElement(t),s = d.getElementsByTagName(t)[0];o.src = '//' + src;s.parentNode.insertBefore(o, s);}

这很好用，我已经开始在几个不同的脚本中使用它

//疯狂蛋async('dnn506yrbagrg.cloudfront.net/pages/scripts/XXXXX/XXXXX.js?' + Math.floor(new Date().getTime()/3600000));//用户语音var uvOptions = {};async('widget.uservoice.com/XXXXX.js');//谷歌分析var _gaq = [['_setAccount', 'UA-XXXXX-XX'], ['_setDomainName', 'coachup.com'], ['_trackPageview']];async('google-analytics.com/ga.js');//条纹async('js.stripe.com/v1');

遇到脚本加载后需要调用的时候问题就来了:

//Snap Engageasync('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/

解决方案

感谢 RASG https://stackoverflow.com/a/3211647/982924

带回调的异步函数:

function async(u, c) {var d = 文档，t = '脚本'，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

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 https://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屋！