javascript - 在页面显示后加载 Google Maps API

Question

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

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

我这样做了:

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

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

Answer 1

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

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

Source: Mozilla Dev Center: window.onload

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

• Execute JavaScript When Page Has Fully Loaded

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

window.onload = map_initialize;