How to delay javascript function until jquery & facebook load?

Question

JQuery provides a very convenient way to delay code execution until the DOM is fully loaded:

$(function() { dom_is_loaded(); }); 

The Javascript SDK for Facebook when run asynchronously provides a similar mechanism:

 window.fbAsyncInit = function() { fb_is_loaded(); } 

What is the most elegant way to delay code execution until the DOM and Facebook SDK are fully initialized?

Answer 1

Is there a reason why just doing

 window.fbAsyncInit = function() { $(function() { both_loaded(); }); } 

does not work?

Answer 2

Why not:

 var jq_ready = false, fb_ready = false; function bothReady(){ ... } $(function() { dom_is_loaded(); jq_ready = true; if(fb_ready){ bothReady(); } }); window.fbAsyncInit = function() { fb_is_loaded(); fb_ready = true; if(jq_ready){ bothReady(); } } 

I think this is cleaner than setting the interval and will handle the event first.

Answer 3

Probably set a flag in your fbAsyncInit function and check it in jQuery loading:

 $(handleLoad); function handleLoad() { if (!facebookLoaded) { setTimeout(handleLoad, 10); // Or 100 or whatever } else { // You're good to go bothLoaded(); } } 

I expect that there is already some global one that you can check if Facebook is loaded (I did not use the Facebook API). If not, you can use your own flag (ideally not global):

 (function() { var fbLoaded = false; window.fbAsyncInit = function() { fbLoaded = true; }; jQuery(handleLoad); function handleLoad() { if (!facebookLoaded) { setTimeout(handleLoad, 10); // Or 100 or whatever } else { // You're good to go bothLoaded(); } } })(); 

Answer 4

You might want to check this explanation.

http://pivotallabs.com/users/jdean/blog/articles/1400-working-with-asynchronously-loaded-javascript