google.setOnLoadCallback avec jQuery $ (document) .ready (), est-il possible de mélanger?

Question

J'utilise l'API Google Ajax de Google et ils suggèrent d'utiliser google.setOnLoadCallback() pour effectuer diverses tâches liées à leur API, mais j'utilise également $(document).ready() de jQuery pour effectuer d'autres tâches JS non liées à API Google.

Est-il prudent de mélanger ces deux approches dans un seul document? Je n'ai pas encore remarqué de problème, mais je suppose que c'est une question d'échelle.

Answer 1

Vous devez faire ceci:

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

Vous ne pouvez pas faire $ (document) .ready () sans que $ (l'objet jQuery) soit disponible, de sorte que cela doit aller dans le rappel. Et vous ne pouvez pas être sûr que le document est prêt dans le rappel, vous devez donc le faire () ().

Answer 2

Désolé de relancer ce à partir de la mort, mais 1) il vient encore comme une "réponse" à ce problème et de 2) j'ai trouvé une meilleure solution.

Il y a une option de 3ème argument sur google.la fonction de charge qui prend un objet d'options de configuration. Une des options est 'callback'. Il obtient également débarrasser de la nécessité d'une salle de setOnLoadCallback appel.

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

Donc:

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

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

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

Answer 3

Si votre code JavaScript réside dans son propre fichier js et non dans le document HTML, vous pouvez également le faire dans le document:

 <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>
 

Cela charge my.js fois que tous les autres éléments ont été chargés à partir de Google. Dans votre fichier my.js , vous pouvez alors faire $(document).ready(...) . Le code de votre application est donc indépendant de "chargé par Google" ou "chargé directement à partir de votre serveur".

Answer 4

Pourquoi mélanger quand vous pouvez tout faire avec $ (document) .ready ()? En d'autres termes, supprimez simplement la fonction google.setOnLoadCallback et utilisez $ (document) .ready () de jQuery.

Ce:

 google.setOnLoadCallback(chartEnrolment);
 

Devient:

 $(document).ready(chartEnrolment);