Comments on: Coupling asynchronous scripts

By: Iouri Goussev

Iouri Goussev — Thu, 16 Dec 2010 04:59:40 +0000

@sunnybear interesting idea with polling.

By: NJ Website Design

NJ Website Design — Thu, 25 Feb 2010 19:35:19 +0000

Coupling asynchronous scripts is just what I was looking for but I am having difficulty with asynch loading also.

By: tham

tham — Mon, 18 May 2009 09:01:37 +0000

Hi Steve,

Could you please look at my question about the race condition in js and asynchronize loading as seen in the link below

http://www.codingforums.com/showthread.php?p=816318#post816318

By: choonkeat

choonkeat — Mon, 20 Apr 2009 22:01:40 +0000

When you can’t post-load (due to several reasons), you can always pretend:

http://blog.choonkeat.com/weblog/2009/03/keeping-google-ads-documentwrite-and-browsers-all-happy.html

By: sunnybear

sunnybear — Thu, 15 Jan 2009 21:12:39 +0000

Steve. According to my previous notice I’d like to share an example of async scripts loading -
http://webo.in/tests/yass-tree-load/
There 2 main cases
1. async scripts are loading in some kind of dependency tree (with recursive post-load handlers). Onload / onreadystatechange is used to run handlers and linked innerHTML code (is required only for Opera – as ‘ve noticed – all the other browsers handles dual scripts well).
2. Secondly there is a JS-counter example. Its onload handler defined via title attribute and this approach can be used for fully external scripts — i.e. GA from my previous reply.

Of course thanks for Onload / Onreadystatechange approach — it really works.

Maybe this will help somehow somebody…

By: David Wei

David Wei — Sun, 04 Jan 2009 23:37:34 +0000

Thanks, Steve.

We have been using dynamic script DOM element and it does improve the site speed a lot.

just want to share one small lesson we learnt from our practice on dynamic script DOM element: it seems that the dynamic script DOM element is not fully compatible with firebug. It is more due to a firebug’s bug (http://code.google.com/p/fbug/issues/detail?id=721) but the effect is very inconvenient for web developers.

Basically, with dynamic script DOM element, firebug’s console might be disabled (if any asynchronously loaded script access variable “console”, even check typeof “console”).

One way we resolved this is to have “window.loadFirebugConsole && window.loadFirebugConsole();” in a static script tag before any dynamic script DOM element is loaded. This single line of work-around spent us a few days so I guess it might be worth to share here.

By: Timothy

Timothy — Wed, 31 Dec 2008 15:34:20 +0000

Nice post. Very informative.

I’ve read up on placing JS includes right before the . Heard about that through YSlow. But the other content you provide is really interesting. Thanks!

By: Steve Souders

Steve Souders — Tue, 30 Dec 2008 17:38:56 +0000

@sunnybear: I’m planning on including this topic in my next book. I’ll certainly add your polling technique, although I prefer using callbacks to polling.

By: sunnybear

sunnybear — Tue, 30 Dec 2008 12:28:15 +0000

@Vish, @Steve: we can use another pattern for such scripts: check time to time if main funciton is loaded (i.e. urchinTracker).

I think there should be an article about different approaches to load scripts unobtrusively written. I mean — sometimes we can use simple John’s approach, sometimes — your LazyLoading. Sometimes — onReadyExecution (that I’ve already described in my book in Russian, for GA):
var _on_ready_execution = setInterval(function() {
if (typeof urchinTracker === ‘function’) {
urchinTracker();
clearInterval(_on_ready_execution);
}
}, 10);

Also we can include all function calls into main script, as Vish has noticed.

By: Steve Souders

Steve Souders — Mon, 29 Dec 2008 18:50:41 +0000

@Vish: I was looking for a more flexible pattern for integrating 3rd party scripts. Although in this case the 3rd party script only has one API function, that’s typically not the case. For typical libraries (jQuery, Google Analytics) the 3rd party developer can’t hardwire the API functions at the bottom of the module.