Comments on: Queue events that occur before JavaScript is loaded http://www.onlineaspect.com/2009/06/24/queue-events-that-occur-before-your-javascript-is-loaded/ a blog about building stuff on the web Mon, 09 Jan 2012 18:55:04 +0000 hourly 1 http://wordpress.org/?v=3.3 By: Josh Fraser http://www.onlineaspect.com/2009/06/24/queue-events-that-occur-before-your-javascript-is-loaded/comment-page-1/#comment-586 Josh Fraser Tue, 30 Jun 2009 19:51:33 +0000 http://www.onlineaspect.com/?p=307#comment-586 There's an interesting article on Ajaxian today that discusses part of this: <a href="http://ajaxian.com/archives/labjs-simple-abstraction-for-loading-dependencies-correctly" target="_blank">http://ajaxian.com/archives/labjs-simple-abstract...</a> There's an interesting article on Ajaxian today that discusses part of this:
http://ajaxian.com/archives/labjs-simple-abstract…

]]> By: ToddBurry http://www.onlineaspect.com/2009/06/24/queue-events-that-occur-before-your-javascript-is-loaded/comment-page-1/#comment-584 ToddBurry Tue, 30 Jun 2009 00:32:44 +0000 http://www.onlineaspect.com/?p=307#comment-584 I think it would be really hard. I've just been coding in php and was trying to think of some way to make it work like __call, __get, __set, etc. I'll have to try it out and see what I can come up with. I think it would be really hard. I've just been coding in php and was trying to think of some way to make it work like __call, __get, __set, etc. I'll have to try it out and see what I can come up with.

]]> By: Josh Fraser http://www.onlineaspect.com/2009/06/24/queue-events-that-occur-before-your-javascript-is-loaded/comment-page-1/#comment-583 Josh Fraser Mon, 29 Jun 2009 17:36:05 +0000 http://www.onlineaspect.com/?p=307#comment-583 Is there a way to track it back to know exactly which function caused the error? It feels like it would be really hard to isolate errors from JS not being loaded from anything else that could happen. Is there a way to track it back to know exactly which function caused the error? It feels like it would be really hard to isolate errors from JS not being loaded from anything else that could happen.

]]> By: Todd http://www.onlineaspect.com/2009/06/24/queue-events-that-occur-before-your-javascript-is-loaded/comment-page-1/#comment-582 Todd Mon, 29 Jun 2009 15:06:34 +0000 http://www.onlineaspect.com/?p=307#comment-582 Have you tried using the global window.onerror to queue events instead of changing the function names? I guess it might not be easy to support in all browsers and you'd have to have some good regex-fu going. Have you tried using the global window.onerror to queue events instead of changing the function names? I guess it might not be easy to support in all browsers and you'd have to have some good regex-fu going.

]]> By: Jon http://www.onlineaspect.com/2009/06/24/queue-events-that-occur-before-your-javascript-is-loaded/comment-page-1/#comment-577 Jon Thu, 25 Jun 2009 17:22:58 +0000 http://www.onlineaspect.com/?p=307#comment-577 Yes this is true. My main concern with 3rd party scripts is that the end of the first script might not be the end of the necessary JS. Often remote scripts will then load multiple other objects/scripts that may be necessary for the code to function properly. And since it's a remote script, even if this isn't the case today, it could be tomorrow ;-) It's a safe bet if it's your own JS though that you know when the last bit of JS you need is and can insert it there. You can even include it as a conditional paramater in the script request if you don't want it to load all the time. Like: <a href="http://mydomain.com/js/script.js?callback=true" target="_blank">http://mydomain.com/js/script.js?callback=true</a> Or something similar, which can then be setup to only include the function call when that parameter is set. Yes this is true. My main concern with 3rd party scripts is that the end of the first script might not be the end of the necessary JS. Often remote scripts will then load multiple other objects/scripts that may be necessary for the code to function properly. And since it's a remote script, even if this isn't the case today, it could be tomorrow ;-) It's a safe bet if it's your own JS though that you know when the last bit of JS you need is and can insert it there. You can even include it as a conditional paramater in the script request if you don't want it to load all the time. Like:
http://mydomain.com/js/script.js?callback=true

Or something similar, which can then be setup to only include the function call when that parameter is set.

]]> By: Josh Fraser http://www.onlineaspect.com/2009/06/24/queue-events-that-occur-before-your-javascript-is-loaded/comment-page-1/#comment-574 Josh Fraser Thu, 25 Jun 2009 14:25:16 +0000 http://www.onlineaspect.com/?p=307#comment-574 I like your suggestion of calling dequeue_actions() sooner. It might get tricky if you are including multiple javascript files in a non-blocking fashion. If you're loading them via standard <script> tags it would be simple to add an inline <script>dequeue_actions()</script> right after your includes even if they're on different domains. A more complicated version could easily take an array of scripts to be lazy-loaded and then watch the onload/onreadystatechange for each of them & only call dequeue_actions() once they were all done. I found some code that would be a great start for anyone interested in taking that on: <a href="http://www.nczonline.net/blog/2009/06/23/loading-javascript-without-blocking/" rel="nofollow">http://www.nczonline.net/blog/2009/06/23/loading-...</a> I like your suggestion of calling dequeue_actions() sooner. It might get tricky if you are including multiple javascript files in a non-blocking fashion. If you're loading them via standard <script> tags it would be simple to add an inline <script>dequeue_actions()</script> right after your includes even if they're on different domains.

A more complicated version could easily take an array of scripts to be lazy-loaded and then watch the onload/onreadystatechange for each of them & only call dequeue_actions() once they were all done. I found some code that would be a great start for anyone interested in taking that on: http://www.nczonline.net/blog/2009/06/23/loading-…

]]> By: Josh Fraser http://www.onlineaspect.com/2009/06/24/queue-events-that-occur-before-your-javascript-is-loaded/comment-page-1/#comment-576 Josh Fraser Thu, 25 Jun 2009 07:38:49 +0000 http://www.onlineaspect.com/?p=307#comment-576 Thanks for re-posting this. That's a good point about people on slow connections -- although I would argue they're like IE6 users, they're already pretty used to having a crappy experience on the web. :) When it comes to website performance, it's usually the perceived speed that matters. You can have something downloading for a minute behind the scenes and it's okay as long as the site still *feels* fast. What about just throwing up a loading indicator when something is added to the queue? That way you acknowledge the users' action but still keep the perception that the page loaded in 2 seconds... even if we're still a few seconds away from being truly done. Thanks for re-posting this. That's a good point about people on slow connections — although I would argue they're like IE6 users, they're already pretty used to having a crappy experience on the web. :)

When it comes to website performance, it's usually the perceived speed that matters. You can have something downloading for a minute behind the scenes and it's okay as long as the site still *feels* fast.

What about just throwing up a loading indicator when something is added to the queue? That way you acknowledge the users' action but still keep the perception that the page loaded in 2 seconds… even if we're still a few seconds away from being truly done.

]]> By: Chris G http://www.onlineaspect.com/2009/06/24/queue-events-that-occur-before-your-javascript-is-loaded/comment-page-1/#comment-575 Chris G Thu, 25 Jun 2009 07:21:53 +0000 http://www.onlineaspect.com/?p=307#comment-575 elegant, simple solution. for very slow connections, the action queuing may throw people off since nothing happens at first and then everything happens at once. another solution would be to have javascript links disabled and/or invisible at load time and then write a function that enables them all - but this might be slow for a page with lots of links. better direction would be to disable the css block(s) where the javascript stuff is. it could also display a loading graphic while things are disabled. this would be more seamless but slower for the impatient user. [reposted from facebook] elegant, simple solution. for very slow connections, the action queuing may throw people off since nothing happens at first and then everything happens at once.

another solution would be to have javascript links disabled and/or invisible at load time and then write a function that enables them all – but this might be slow for a page with lots of links. better direction would be to disable the css block(s) where the javascript stuff is. it could also display a loading graphic while things are disabled. this would be more seamless but slower for the impatient user.

[reposted from facebook]

]]> By: Jon http://www.onlineaspect.com/2009/06/24/queue-events-that-occur-before-your-javascript-is-loaded/comment-page-1/#comment-573 Jon Thu, 25 Jun 2009 06:52:28 +0000 http://www.onlineaspect.com/?p=307#comment-573 Interesting technique. I've not seen this queuing method before, but I have seen another method of dealing w/ this problem that is very similar. Basically, the idea is that when you load the javascript links initially you give them dummy functions that queue the function call, but then replace the href once the javascript is loaded (and execute the queue). It avoids the wrapper but at a rather expensive replacement of the links. I think your idea of a wrapper function is a bit cleaner, but generally eval is pretty bad with large functions/bodies of code in my experience, so the other technique may work better if it's any more complicated than a straight function call. One thing you might consider to get a slight bit of extra performance is adding the dequeue_actions(); call to the end of the javascript you're loading (assuming you control the script and it's not loaded from a third party). This will allow the js to execute as soon as the necessary javascript is loaded instead of waiting for the onload event (which on a heavy page could be noticeably later). Interesting technique. I've not seen this queuing method before, but I have seen another method of dealing w/ this problem that is very similar. Basically, the idea is that when you load the javascript links initially you give them dummy functions that queue the function call, but then replace the href once the javascript is loaded (and execute the queue). It avoids the wrapper but at a rather expensive replacement of the links. I think your idea of a wrapper function is a bit cleaner, but generally eval is pretty bad with large functions/bodies of code in my experience, so the other technique may work better if it's any more complicated than a straight function call.

One thing you might consider to get a slight bit of extra performance is adding the dequeue_actions(); call to the end of the javascript you're loading (assuming you control the script and it's not loaded from a third party). This will allow the js to execute as soon as the necessary javascript is loaded instead of waiting for the onload event (which on a heavy page could be noticeably later).

]]>