Chargement de l'API Google Maps après l'affichage de la page

Question

Ma page de destination contient une grande partie google maps, ce qui ralentit le temps de chargement. J'essaie de faire ce qui suit:

1. Chargez d'abord les éléments statiques afin que la page se charge rapidement.
2. Afficher une notification de chargement dans l'espace réservé de la carte afin que l'utilisateur sait que la carte est à venir
3. Charger et afficher la carte

Je l'ai fait:

$(document).ready(function() { 
    map_initialize(); 
} 

Le map_initialize() La fonction charge la carte dans son div conteneur. Cependant, cela n'affiche toujours pas les éléments statiques poing. La page attendra que le map_initialize() soit terminé, puis chargera les éléments statiques en même temps que la carte.

Answer 1

L'événement window.onload attendra les images, et toute autre ressource sur le document, à charger avant qu'il ne soit tiré:

L'événement se déclenche de charge à la fin du processus de chargement de documents. À ce point , tous les objets dans le document sont dans le DOM, et toutes les images et les sous-cadres ont terminé chargement.

Source: Mozilla Dev Center: window.onload

Vous pouvez également consulter la poste Stack Overflow suivant pour en savoir plus:

• Execute JavaScript When Page Has Fully Loaded

donc tout ce que vous devez faire est pour définir le gestionnaire d'événements window.onload comme suit:

window.onload = map_initialize; 

Answer 2

Essayez ceci:

$('body').load(function() { 
    map_initialize(); 
}); 

[modifier] Je viens de découvrir ce des commentaires des utilisateurs dans la documentation jQuery: http://api.jquery.com/load-event/#comment-43474051

Answer 3

Si vous utilisez l'événement onLoad les éléments statiques devraient charger avant votre carte . La méthode ready dans JQuery s'exécutera avant que tout soit chargé; il fonctionne dès que document est prêt.