页面显示后加载 Google Maps API

Question

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

1. 首先加载静态元素，以便页面最初加载速度快。
2. 在地图占位符中显示加载通知，以便用户知道地图即将到来
3. 加载并显示地图

我已经这样做了：

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

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

Answer 1

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

load 事件在文档加载过程结束时触发。 至此，文档中的所有对象都在DOM中，所有的图片和子框架都已经加载完毕。

来源： Mozilla 开发中心：window.onload

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

• 当页面完全加载时执行 JavaScript

因此，您需要做的就是设置window.onload事件处理程序如下：

window.onload = map_initialize;

Answer 2

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

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

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

Answer 3

尝试这个：

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

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

Answer 4

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

Answer 5

没有 jQuery，你可以这样做：

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