Ensuring jQuery plays nicely with Facebook’s API loaded asynchronously via LAB.js

Facebook logo

Image via Wikipedia

I’m beginning to play with jQuery and Facebook registration and stumbled upon a potential problem I wanted to nip in the bud. Jeff Dean @PivotalLabs wrote it up here, along with his solution.

In essence, if both js libraries are loaded asynchronously, do you wait for jQuery’s document ready? Or Facebook’s init? If it loads in the wrong order, you’re screwed.

Well, with LAB.js, why not load everything asynchronously and force one to go first? That was my solution, which has the benefit of using a loader for all your js, speeding everything up. Just for fun, I’m adding jQueryUI to the mix. You can’t use the UI with the parent library.

Here is the code in a gist. Keep in mind, I’m more of a backend programmer so don’t be shy about commenting with improvements or corrections.

Enhanced by Zemanta

One response to “Ensuring jQuery plays nicely with Facebook’s API loaded asynchronously via LAB.js

  1. Found a pretty easy way to fix the problem. Just add this line below your FB.init() function in the window.fbAsyncInit function.

    (function (){if(window.JQinit){JQinit();}else{window.setTimeout(this,100);}})();

    then any JQuery you need to execute that you normally use throw into the function:

    function JQinit()
    {
    // JQuery code goes here.
    }

    Obviously you can change the names of the function and the timeout to tweak speeds.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s