google.setOnLoadCallback con jQuery $ (documento) .ready(), ¿está bien mezclar?

Question

Estoy usando Google Ajax API y sugieren que use google.setOnLoadCallback() para hacer varias cosas relacionadas con su API, pero también estoy usando jQuery's $(document).ready() para hacer otras cosas de JS, no relacionadas con la API de Google.

¿Es seguro mezclar estos dos enfoques en un solo documento? No noté ningún problema todavía, pero supongo que es una cuestión de escala.

Answer 1

Más o menos, tiene que hacer esto:

google.setOnLoadCallback(function() { 
    $(function() { 
    // init my stuff 
    }); 
}); 

No se puede hacer sin $(document).ready()$ (el objeto jQuery) que está disponible, por lo que debe ir dentro de la devolución de llamada. Y no puede estar seguro de que el documento esté listo dentro de la devolución de llamada, por lo que debe hacer también ready().

Answer 2

Si el código JavaScript reside en su propio archivo js y no dentro del documento HTML que también podría hacer esto en el documento:

<script> 
     google.load("jquery", "1.7.0"); 
     google.load("jqueryui", "1.8.16"); 
     google.setOnLoadCallback(function() { 
      var script = document.createElement("script"); 
      script.setAttribute("type", "text/javascript"); 
      script.setAttribute("src", "my.js"); 
      document.getElementsByTagName("html")[0].appendChild(script); 
     }); 
</script> 

Esto carga my.js después de todo otras cosas se carga desde Google. En su archivo my.js, puede hacer $(document).ready(...). Por lo tanto, el código de su aplicación es independiente de "cargado por google" o "cargado directamente desde su servidor".

Answer 3

Lamento levantar esto de la muerte, pero 1) Sigue apareciendo como una "respuesta" a este problema y 2) Encontré una solución mejor.

Hay un tercer argumento opcional en la función google.load que toma un objeto de las opciones de configuración. Una de las opciones es callback. También elimina la necesidad de llamar por separado a setOnLoadCallback.

E.g.

google.load('visualization', '1.0', { 
    'packages': "charttype", 
    'callback': $jQ.proxy(me.setupChart, me) 
}); 

Así:

<script src="https://www.google.com/jsapi"></script> 
<script> 
$(document).ready(function() { 
    function mapsLoaded() { 
     etc etc etc 
    } 

    google.load("maps", "2", {"callback" : mapsLoaded}); 
}); 
</script> 

Ver: https://developers.google.com/loader/#Dynamic

Answer 4

Por qué mezclar cuando usted puede hacerlo todo con $(document).ready()? Deshágase de la función google.setOnLoadCallback y use jQuery's $(document).ready().

Este:

google.setOnLoadCallback(chartEnrollment); 

convierte

$(document).ready(chartEnrollment);