Question

当我点击位置标签时，我的网站会加载google地图api，然后初始化地图。在单击此选项卡之前，我不想加载api。我注意到每次单击选项卡时都会加载api（导致站点的内存使用量增加）。我将其包装的if/else语句在click()函数中不起作用。我也按照https://stackoverflow.com/a/11803418/4184379异步加载api和我的mapconstructor.js。我已经检查了if/else上的类似答案没有点击，但他们没有帮助。

$("[id=location-tab]").click(function() {  
  if (typeof google.maps.event.trigger == 'undefined') {
    $.when(
      $.getScript("https://maps.googleapis.com/maps/api/jsv=3.exp&sensor=false&callback=initialize" ),
      $.getScript( "assets/js/gmap.js" ),
      $.Deferred(function( deferred ) {
        $( deferred.resolve );
      })
    ).done(function() {
      initialize();
    });
  }
  else {
    google.maps.event.trigger(map_canvas, 'resize');
  }
});

Answer 1

你有没有检查过你是否正在做$("[id=location-tab]").click(function() {... dom-ready？因为它似乎也很奇怪，你添加了一个延迟，可以解决你的when电话。它应该可以很好地解决，但它似乎让你在dom-ready之前添加了on-click。

Answer 2

有两个问题。一个是确定库的可用性，if将抛出例外，例如google未定义。一般来说，以下代码更健壮：

if (window.google && window.google && window.google.maps &&...) {
   google.maps.event.trigger(map_canvas, 'resize');
} else {
   if (!libraryIsLoading) { //needs to be defined somewhere in global scope...
     libraryIsLoading = true; 
     //load library here
   }
}

这个if从左到右进行评估，因此它消除了异常的机会。但是，正确加载库非常棘手。在大多数情况下，使用require.js是值得的，或者，如果您寻找较小尺寸的库，请查看curl.js

我会使用curl或者require或者任何替代方法而不是编写我自己的代码，因为我肯定会在项目的其他部分使用它：它提供了一种组织代码并使其面向未来的方法。 / p>

用于脚本加载的预初始化jQuery代码无法正常工作

2 个答案: