如何在点击Bootstrap上懒加载谷歌地图？
我为公司建立的网站
我正在开发一个网站的公司有3个位置，我在网站上显示嵌入式地图。但是，由于加载地图需要花费大量时间，因此我希望在悬停菜单项后加载地图。
让我告诉你WEBSITE。
在顶部导航栏上的这个网站上有一个名为“ILETISIM”的框。
通常当我加载我的网站时，会自动加载3张地图以显示地图。如果我将鼠标悬停在“ILETISIM”项目上并不重要。
我想要的是我希望他们在我停留在ILETİSİM后开始加载。应该有懒惰的负载。通过这种方式，加载时间将减少。
<li class="dropdown full-width"><a href="#" class="dropdown-toggle" data-toggle="dropdown">İLETİŞİM<b class="icon-angle-down"></b></a>
<ul class="dropdown-menu span12 iletisim" style="width: 980px; left: -493px;">
<div class="row-fluid">
<div class="span12">
<div class="span4">
<div class="span12">
<div class="well well-small">GENEL MÜDÜRLÜK VE FABRİKA</div>
</div>
<div class="span6">
<ul class="unstyled">
<li><i class="icon-envelope"></i>
Email
</li>
<li class="divider"></li>
<a href="#">sales@goxu.com.tr</a>
</ul>
</div>
<div class="span6">
<ul class="unstyled">
<li><i class="icon-user"></i>
Telefon
</li>
<li class="divider"></li>
<p>+90 216 466 89 89</p>
</ul>
</div>
<div class="span12">
<ul class="unstyled">
<li><i class="icon-home"></i>
Adres
</li>
<li class="divider"></li>
<p>Dudullu Organize Sanayi Bölgesi
3.Cad. No:14 Ümraniye 34775 İSTANBUL</p>
</ul>
</div>
<div class="span12">
<ul class="unstyled">
<li><i class="icon-map-marker"></i>
Harita
</li>
<li class="divider"></li>
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ch/maps?f=q&source=s_q&hl=de&geocode=&q=Bern&aq=&sll=46.813187,8.22421&sspn=3.379772,8.453979&ie=UTF8&hq=&hnear=Bern&t=m&z=12&ll=46.947922,7.444608&output=embed&iwloc=near"></iframe>
</div>
</ul>
</div>
</div>
<div class="span4">
<div class="span12">
<div class="well well-small">GENEL MÜDÜRLÜK VE FABRİKA</div>
</div>
<div class="span6">
<ul class="unstyled">
<li><i class="icon-envelope"></i>
Email
</li>
<li class="divider"></li>
<a href="#">sales@goxu.com.tr</a>
</ul>
</div>
<div class="span6">
<ul class="unstyled">
<li><i class="icon-user"></i>
Telefon
</li>
<li class="divider"></li>
<p>+90 216 466 89 89</p>
</ul>
</div>
<div class="span12">
<ul class="unstyled">
<li><i class="icon-home"></i>
Adres
</li>
<li class="divider"></li>
<p>Dudullu Organize Sanayi Bölgesi
3.Cad. No:14 Ümraniye 34775 İSTANBUL</p>
</ul>
</div>
<div class="span12">
<ul class="unstyled">
<li><i class="icon-map-marker"></i>
Harita
</li>
<li class="divider"></li>
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ch/maps?f=q&source=s_q&hl=de&geocode=&q=Bern&aq=&sll=46.813187,8.22421&sspn=3.379772,8.453979&ie=UTF8&hq=&hnear=Bern&t=m&z=12&ll=46.947922,7.444608&output=embed&iwloc=near"></iframe>
</div>
</ul>
</div>
</div>
<div class="span4">
<div class="span12">
<div class="well well-small">GENEL MÜDÜRLÜK VE FABRİKA</div>
</div>
<div class="span6">
<ul class="unstyled">
<li><i class="icon-envelope"></i>
Email
</li>
<li class="divider"></li>
<a href="#">sales@goxu.com.tr</a>
</ul>
</div>
<div class="span6">
<ul class="unstyled">
<li><i class="icon-user"></i>
Telefon
</li>
<li class="divider"></li>
<p>+90 216 466 89 89</p>
</ul>
</div>
<div class="span12">
<ul class="unstyled">
<li><i class="icon-home"></i>
Adres
</li>
<li class="divider"></li>
<p>Dudullu Organize Sanayi Bölgesi
3.Cad. No:14 Ümraniye 34775 İSTANBUL</p>
</ul>
</div>
<div class="span12">
<ul class="unstyled">
<li><i class="icon-map-marker"></i>
Harita
</li>
<li class="divider"></li>
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ch/maps?f=q&source=s_q&hl=de&geocode=&q=Bern&aq=&sll=46.813187,8.22421&sspn=3.379772,8.453979&ie=UTF8&hq=&hnear=Bern&t=m&z=12&ll=46.947922,7.444608&output=embed&iwloc=near"></iframe>
</div>
</ul>
</div>
</div>
</div>
</div></ul>
</li>
3 个答案:
答案 0 :(得分：0)
您应该能够将处理程序附加到链接/按钮的mouseover事件，并让该功能初始化您的Google地图..
$('#btn1').mouseover(function(){
initialize();
});
您可能希望为“ILETISIM”链接指定唯一的ID属性，或者您可以将上方的选择器更改为$('[data-toggle=dropdown]')，以便将鼠标悬停功能附加到所有菜单链接。
答案 1 :(得分：0)
继Skelly的回答。
您可以简单地使用图像替换技术来满足您的要求。
请参阅示例 - http://bootply.com/68986
$('#staticimg').click(function(){
initialize();
$('#staticimg').remove();
});
这只是通过初始化div上的谷歌地图并删除静态图像。根据需要改变。
您还可以将事件处理程序更改为hover。
答案 2 :(得分：0)
第一件事 ，您没有使用 Google maps API ，它被称为iframe Google maps嵌入。< / p>
他们两个都是完全不同的。
所以你需要玩下面的东西来做一些延迟加载
$('.someClass').hover(){
var src1 = "your iframe1 url",
src2 = "your iframe2 url",
src3 = "your iframe3 url";
$('#iFrame1').show().prop('src', src1); //Have IDs for your iframes
$('#iFrame2').show().prop('src', src2); //because each has its src
$('#iFrame3').show().prop('src', src3);
},function(){
$('iFrame1').hide(); //You can even remove the src instead of hiding
$('iFrame2').hide();
$('iFrame3').hide(); //Also you can even have it in setTimeout()
});
希望你有所了解。
更新：
如果您想更改为Google Maps API，请检查my answer。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？