Question

我正在为非营利性的董事会创建一个页面。在灯箱中，我有其他信息，包括指向其营业地点的Google地图。它看起来很棒但是他们有几个董事会（10+），并且许多谷歌地图导致页面加载速度非常慢。我几乎无法滚动它加载速度如此之慢。（我使用的是Firefox 20）当我在Chrome中测试它并不是那么慢但有时可能很慢。

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

注意：一旦我看到谷歌地图停止加载页面运行非常顺利。在谷歌地图加载时，它只是缓慢而生涩。

这是我的灯箱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。

如何阻止地图加载，直到触发灯箱？

Answer 1

我无法使用<iframe>嵌入代码找到一种方法。我所做的是在调用Fancybox时使用gmap3加载地图。以下是我使用的代码示例：

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

在一个页面上加载多个Google地图 - 慢？

1 个答案: