Question

我有一个使用Google地图的angularJS网络应用。为了提高性能，我想优先考虑页面加载或至少关键的渲染路径，因此我想在页面加载之后延迟google地图的加载。

要获得更多详细信息，实际上我有在索引页中加载google地图的脚本，例如：

<html ng-app="myApp">
<head></head>
<body>
<!-- My code here -->
<script async defer type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.37"></script>
</body>
</html>

此外，我有一个局部模板视图，该视图具有使用Google地图的指令。

<boats-map location="Spain" zoom="8" class="map-container"></boats-map>

我认为该指令的细节与该问题无关。但是应该是这样的：

.directive('boatsMap',  [
    function() {            

    function link(scope, element, attrs) {  

        console.log("Map loaded");                                                            
        // Do whatever logic
    }

一切正常，因为这只是出于性能目的，但是我在devtools的网络瀑布中注意到的是，当我评论加载google map的脚本以及视图中的指令，页面和关键时，渲染路径会在大约3秒之前加载。

因此，我想延迟此功能，直到页面完全加载为止。

请注意，脚本正在使用async和defer来异步加载脚本，但这不能避免对加载造成很大影响。

我读过这样的方法：How do I load google maps external javascript after page loads?，但不确定这是否是成角度的方法。

请找到性能截图： 1.使用Google Maps脚本：

评论Google Maps脚本：

Answer 1

要考虑的一个选项是结合使用callback参数和async属性。这样，您可以确保从documentation加载了Google Maps API：

API就绪后，它将调用使用 callback参数。

更改列表：

a）指定callback函数名称：

<script async defer src="https://maps.google.com/maps/api/js?callback=lazyLoadCallback"></script>

b）Google Maps API准备就绪后，初始化地图：

link: function(scope) {
    window.lazyLoadCallback = () => {
       //Google Maps API is ready...        
    };
}

Plunker

如何在angularjs页面加载后加载Google地图（以提高性能）

1 个答案: