Google.setOnLoadCallback con jQuery document (documento).ready (), ¿está bien mezclar?

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

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

Author: zgoda, 2009-02-17
Source

4 answers

Tienes que hacer esto: 

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

No se puede hacer $(document).ready() sin que $ (el objeto jQuery) 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 también tiene que hacer ready().

 68
Author: cletus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-04 16:49:05

Lamento estar levantando esto de entre los muertos, pero 1) Todavía aparece como una 'respuesta' a este problema y 2) He encontrado una mejor solución.

Hay un 3er argumento opcional en la función google.load que toma un objeto de opciones de configuración. Una de las opciones es callback. También elimina la necesidad de una llamada setOnLoadCallback separada.

Por ejemplo 

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

Así que: 

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

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

Véase: https://developers.google.com/loader/#Dynamic

 49
Author: Dawn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-19 00:24:07

Si su código JavaScript reside en su propio archivo js y no dentro del documento HTML, 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 que todas las demás cosas se carguen desde Google. En tu archivo my.js puedes hacer $(document).ready(...). Por lo tanto, su código de aplicación es independiente de "cargado por Google" o "cargado directamente desde su servidor".

 6
Author: andy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-11-12 15:27:03

¿Por qué mezclar cuando se puede hacer todo con $(document).ready()? Simplemente deshazte de la función google.setOnLoadCallback y usa la función $(document).ready() de jQuery.

Esto: 

google.setOnLoadCallback(chartEnrollment);

Se convierte en 

$(document).ready(chartEnrollment);
 4
Author: Vincent,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-04 17:19:24