jquery - 如何在单击 Bootstrap 时延迟加载 Google map ？

Question

我为一家公司建的网站

我正在开发网站的公司有 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&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>

Answer 1

首先，您没有使用 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 .