我为一家公司建的网站
我正在开发网站的公司有 3 个位置，我在网站上显示嵌入式 map 。但是，由于加载 map 需要花费大量时间，因此我希望在悬停菜单项后加载 map 。
让我给你看WEBSITE .
在这个网站的顶部导航栏上有一个名为“ILETISIM”的框。
所以通常当我加载我的网站时，会自动加载 3 张 map 以显示 map 。如果我将鼠标悬停在“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>
最佳答案
首先，您没有使用 Google maps API，它被称为 iframe Google maps嵌入。
两者完全不同。
所以你需要玩像下面这样的东西来做一些延迟加载
$('.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 .
关于jquery - 如何在单击 Bootstrap 时延迟加载 Google map ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17786414/