延期屬性不適用於Google Maps API？

Question

我試圖確保Google地圖是在頁面上加載的最後一件東西，並且不會負面影響頁面的性能。

當defer屬性放置後...傳感器=假」，地圖將不會出現。什麼是使用與谷歌地圖defer屬性的最佳方式？這甚至可能？

<div id="map-canvas"></div> 
     <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false" defer></script> 
     <script defer> 
      function initialize() { 
       var mapOptions = { 
        center: new google.maps.LatLng(37.7599446, -122.4212681), 
        zoom: 12, 
        panControl: false, 
        disableDefaultUI: true, 
        scrollwheel: false, 
        mapTypeControl: false, 
        mapTypeControlOptions: { 
         style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
        }, 
        panControlOptions: { 
         position: google.maps.ControlPosition.LEFT_CENTER 
        }, 
        zoomControl: true, 
        zoomControlOptions: { 
         position: google.maps.ControlPosition.LEFT_CENTER 
        }, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

       var map = new google.maps.Map(document.getElementById("map-canvas"), 
        mapOptions); 

       var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(37.7599446, -122.4212681), 
        map: map, 
        title: '805 Valencia St. San Francisco, CA' 
       }); 
       var contentString = '<div id="map-content">' + 
        '<div id="siteNotice">' + 
        '</div>' + 
        '<h1 id="firstHeading" class="firstHeading">805 Valencia St.<br>San Francisco, CA</h1>' + 
        '<div id="bodyContent">' + 
        '' + 
        '<ul class="email-list"><li>info@yourbetty.com</li><li>support@yourbetty.com</li><li>press@yourbetty.com</li></ul>' + 
        '</div>' + 
        '</div>'; 

       var infowindow = new google.maps.InfoWindow({ 
        content: contentString, 
        maxWidth: 330 
       }); 

       google.maps.event.addListener(marker, 'click', function() { 
        infowindow.open(map, marker); 
       }); 

      } 

      google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 

Answer 1

當您使用延期則必須使用API​​的異步版本：

<script defer 
    src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"> 
</script> 

問題：
當您使用defer腳本將在文檔關閉時加載 - 內容已加載。此外，內聯defferred腳本後將解析外部deferred腳本。

這有關係到你實現兩個側面效果：

1. 您無法使用API​​的同步版本，因爲它使用的document.write，不能後使用該文檔已被關閉

2. 電話：

   google.maps.event.addDomListener(window, 'load', initialize); 
   

   ...是有一點磨片由於Maps-API尚未加載，因此google未定義，初始化將永遠不會執行。