如何在點擊引導時延遲加載Google地圖？

我正在開發一個網站的公司有3個位置，我在網站上顯示嵌入式地圖。但是，由於加載地圖需要大量時間，因此我希望在懸停菜單項後加載地圖。

讓我告訴你WEBSITE。

在這個網站的頂部導航欄上有一個名爲'ILETISIM'的框。

因此，通常當我加載我的網站時，3個地圖會自動加載以顯示地圖。如果我徘徊在'ILETISIM'項目上並不重要。

我想要的是我希望他們在ILETİSİM上懸停後開始加載。應該有像延遲加載的東西。通過這種方式，加載時間將減少。

enter image description here

<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="#">[email protected]</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="#">[email protected]</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="#">[email protected]</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>

來源

2013-07-22 SNaRe

第一件事，你不使用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() 
    });

希望你有一些想法。

更新：

如果你想改變谷歌地圖API，檢查my answer。

來源

2013-07-22 15:41:18 Praveen

那麼我怎麼可以用Google Maps Api做到這一點呢？它看起來是正確的。 – SNaRe

我已經用參考更新了我的答案。檢查我的回答:) – Praveen

你應該能夠處理程序連接到mouseover事件你的鏈接/按鈕，並有功能初始化谷歌地圖..

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

你可能想爲您的'ILETISIM'鏈接指定一個唯一的id屬性，或者您可以將上面的選擇器更改爲$('[data-toggle=dropdown]')以將鼠標懸停功能附加到所有菜單鏈接。

Working demo：http://bootply.com/68978

來源

2013-07-22 13:19:02 ZimSystem

但這不是一個懶惰的負載。我的意思是延遲加載是當頁面加載時，嵌入式谷歌地圖不會被初始化。它會在我點擊它時被初始化。請檢查我以更簡單的方式解釋這個問題http://stackoverflow.com/questions/17787006/how-to-convert-static-google-maps-to-dynamic-google-maps-onclick-static-maps – SNaRe

繼續閱讀Skelly的回答。

您可以簡單地使用圖像替換技術來實現您的要求。

看到樣品在 - http://bootply.com/68986

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

這只是工作方式初始化的div的，谷歌地圖和去除靜態圖像。根據需要改變。

您還可以將事件處理程序更改爲hover。

來源

2013-07-22 14:16:06 Kami

問題在這裏是;谷歌地圖仍然是預加載。我想要的是當我點擊圖像時，我想要加載（所有數據）。我的目標是減少加載時間。 – SNaRe

我不確定您使用什麼來衡量預加載。使用上面的代碼和Skelly's查看firefox的原始獲取 - 在觸發initalise事件之前，沒有從google加載。這是函數調用的目的，以消除和加載谷歌地圖位。 – Kami

如果您的意思是阻止google maps api本身預加載，那麼您可以在click函數中嵌入它的加載調用。 – Kami

如何在點擊引導時延遲加載Google地圖？

回答

相關問題