1

我正在为一家公司建立的网站

我正在开发网站的公司有 3 个位置，我在网站上显示嵌入的地图。但是，由于加载地图需要很长时间，我希望在悬停菜单项后加载地图。

让我向您展示网站。

在此网站的顶部导航栏上有一个名为“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&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=Bern&amp;aq=&amp;sll=46.813187,8.22421&amp;sspn=3.379772,8.453979&amp;ie=UTF8&amp;hq=&amp;hnear=Bern&amp;t=m&amp;z=12&amp;ll=46.947922,7.444608&amp;output=embed&amp;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&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=Bern&amp;aq=&amp;sll=46.813187,8.22421&amp;sspn=3.379772,8.453979&amp;ie=UTF8&amp;hq=&amp;hnear=Bern&amp;t=m&amp;z=12&amp;ll=46.947922,7.444608&amp;output=embed&amp;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&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=Bern&amp;aq=&amp;sll=46.813187,8.22421&amp;sspn=3.379772,8.453979&amp;ie=UTF8&amp;hq=&amp;hnear=Bern&amp;t=m&amp;z=12&amp;ll=46.947922,7.444608&amp;output=embed&amp;iwloc=near"></iframe>
                            </div>
                        </ul>
                    </div>
                </div>
            </div>
    </div></ul>
</li>
4

3 回答 3

0

您应该能够将处理程序附加到mouseover您的链接/按钮的事件，并让该功能初始化您的谷歌地图..

$('#btn1').mouseover(function(){
    initialize();
});

您可能希望为您的“ILETISIM”链接提供一个唯一的 id 属性，或者您可以更改上面的选择器以$('[data-toggle=dropdown]')将鼠标悬停功能附加到所有菜单链接。

工作演示：http ://bootply.com/68978

于 2013-07-22T13:19:02.253 回答
0

除了斯凯利的回答。

您可以简单地使用图像替换技术来满足您的要求。

参见示例 - http://bootply.com/68986

$('#staticimg').click(function(){
    initialize();
    $('#staticimg').remove();
});

这只需在 div 上初始化谷歌地图并删除静态图像即可。根据需要进行更改。

您还可以将事件处理程序更改为hover.

于 2013-07-22T14:16:06.567 回答
0

首先，你没有使用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，请查看我的答案。

于 2013-07-22T15:41:18.077 回答