Google API Loader setOnLoadCallback() - is DOM ready?

Question

I am using SWFObject and for the alternative content (no Flash) I want to use a jQuery plugin.
Obviously I want to load jQuery and the plugin script only when Flash is not available. So Google's API Loader seems perfect.

Now I am having issues with the setOnLoadCallback() event. It seems to be triggered like it should, but maybe before the DOM is ready? I found another question on SO revealing there is a second undocumented parameter, on DOM load..
but I still can't access jQuery!

<script type="text/javascript" src="https://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>
<script type="text/javascript">
    google.load("swfobject", "2.2");
</script>
<script type="text/javascript">
    swfobject.embedSWF("slideshow.swf", "slideshow", "800", "530", "7","expressInstall.swf", null, null, null, flashNotLoaded);

    function flashNotLoaded(e) {
        if (!e.success) {
            google.load("jquery", "1.4.2");
            google.setOnLoadCallback(jQueryLoaded, true);
        }
    }

    function jQueryLoaded() {
        alert("jquery loaded");
        $("body").css("background-color","ff00ff"); // does not work....
        $(function() {
            $("body").css("background-color","ff0000"); // neither does this...
        });
    }
</script>

EDIT: It seems that google.load for libraries like jQuery is only available on window.load
Only a few of Google own API's can be dynamically loaded with callbacks
See: Google Library API - google.load does not load from event?

Could your callback be getting fired as a result of loading swfobject, rather than jQuery? — Ross Snyder, Nov 06 '10 at 18:16

score 1 · Answer 1 · answered Nov 06 '10 at 20:34

1

I suspect the DOM isn't actually ready when jQueryLoaded is called. You should probably make sure swfobject.embedSWF is called from a callback registered with swfobject.addDomLoadEvent.

answered Nov 06 '10 at 20:34

mpdonadio

2,891
3
35
54

thanks for that, I can't load with google.load("jquery", "1.4.3"); from an .addDomLoadEvent's callback.. – FFish Nov 07 '10 at 09:28
Thanks for the info. Few notes. swfobject exposes Flash detection with it API, so you may not really need to embed and use the callback. You really need to use swfobject from a DOM ready to make sure the element you are using exists. Your method will end up making three network loads instead of two by just loading both swfobject and jQuery from the CDN. – mpdonadio Nov 07 '10 at 16:32

FFish · Accepted Answer · 2010-11-07T09:57:42.250

@MPD noticed the DOM is not ready, so I used swfobject.addDomLoadEvent with a callback.
In here with google.load("jquery", "1.4.3"); jQuery doesn't seem to load?

<script type="text/javascript" src="https://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>
<script type="text/javascript">
    google.load("swfobject", "2.2");
    google.setOnLoadCallback(swfobjLoaded);

    function swfobjLoaded() {
        swfobject.embedSWF("slideshow.swf", "slideshow", "800", "530", "7","expressInstall.swf", null, null, null, swfobjSuccess);
        swfobject.addDomLoadEvent(swfobjDOMReady);
    }

    var isSWFEmbedded = true;
    function swfobjSuccess(e) {
        if (!e.success) {
            isSWFEmbedded = false;
        }
    }

    function swfobjDOMReady() {
        if (!isSWFEmbedded) {
            alert("dom is ready, Flash is not embedded, now load jquery"); // everything works fine untill here
            google.load("jquery", "1.4.3"); // does not load, page goes blank??
            google.setOnLoadCallback(jqueryLoaded);
        }
    }

    function jqueryLoaded() {
        $("body").css("background-color","ff0000");
    }
</script>

Google API Loader setOnLoadCallback() - is DOM ready?

2 Answers2