javascript - 在一页上加载多个 Google map - 慢？

Question

我正在为一个非营利组织创建一个页面，列出他们的董事会。在灯箱中，我有其他信息，包括精确定位其营业地点的 Google map 。它看起来很棒，但是他们有多个董事会(10 人以上)，而且许多 Google map 导致页面加载非常缓慢。我几乎无法滚动它加载如此缓慢。 (我使用的是 Firefox 20)当我在 Chrome 中测试时，它并不那么慢，但有时会很慢。

有没有办法在打开灯箱之前只加载 Google map ？

注意:当我看到 Google map 停止加载时，页面运行非常流畅。只是在加载 Google map 时速度缓慢且不稳定。

这是我的灯箱 HTML:

<div class="hide">
 <div id="name">
  <div class="grid_8">
   <p class="bio">Info Goes Here</p>
   <p>Info Goes Here</p>
  </div>
  <div class="grid_4">
   <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="map-code"></iframe><br /><small><a target="_blank" href="map-link" style="color:#0000FF;text-align:left">View Larger Map</a></small>
  </div>
  </div>
</div>

我正在使用 Fancybox 2 和 jQuery 1.8.3。

如何在触发灯箱之前停止加载 map ？

Answer 1

我无法找到使用 <iframe> 执行此操作的方法嵌入代码。我所做的是使用 gmap3在调用 Fancybox 时加载 map 。这是我使用的代码示例:

$(function() {
  $(".fancybox").fancybox({
         beforeLoad : function() {  
            $("#map").gmap3({
                 // MAP OPTIONS
            });
         }
   });  
});