页面显示后加载 Google Maps API答案

【问题标题】：Loading Google Maps API after the page is displayed页面显示后加载 Google Maps API
【发布时间】：2010-04-23 22:35:14
【问题描述】：

我的着陆页包含一个很大的谷歌地图部分，这会减慢加载时间。我正在尝试执行以下操作：

我已经这样做了：

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

map_initialize() 函数将地图加载到其容器 div 中。但是，这仍然不会显示静态元素拳头。页面会等到map_initialize()完成，然后在加载地图的同时加载静态元素。

【问题讨论】：

【解决方案1】：

window.onload 事件将等待图像和文档上的任何其他资源在被触发之前加载：

加载事件在结束时触发文件加载过程。在这点，所有对象在文档在 DOM 中，所有图像和子帧已完成正在加载。

来源：Mozilla Dev Center: window.onload

您可能还想查看以下 Stack Overflow 帖子以进一步阅读：

因此，您只需将window.onload 事件处理程序设置如下：

window.onload = map_initialize;

【讨论】：

【解决方案2】：

我研究了这个功能并遇到了这个问题。解决方案是..

function initMap() {
  --google map code--
}

$(document).ready(function () {
google.maps.event.addDomListener(window, 'load', initMap);
});

【讨论】：

【解决方案3】：

没有 jQuery 你可以这样做：

window.addEventListener('load', () => { 
    map_initialize();
});

【讨论】：

【解决方案4】：

如果您使用 onLoad 事件，静态元素应在地图之前加载。 JQuery 中的ready 方法将在所有内容加载之前运行；它会在 document 准备好后立即运行。

【讨论】：

【解决方案5】：

试试这个：

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

[编辑] 我刚刚从 jQuery 文档中的用户 cmets 中找到了这个： http://api.jquery.com/load-event/#comment-43474051

【讨论】：