Question

我在turbolinks加载的.js文件中使用Google Maps API V3。

加载$('#google-map')元素时会触发地图渲染：

function initGoogleMap() {
   ...
   var map = new google.maps.Map($('#google-map').get(0), mapOptions);
   ...
}

$('#google-map').ready(function() {
  initGoogleMap();
});

问题是当initGoogleMap()运行时，它使用$('#google-map')的宽度和高度来渲染地图，此时宽度和高度为0 。

宽度和高度在以控制器命名的.scss文件中定义：

.map {
    height: 300px;
    width: 400px;

    #google-map {
        height: 300px;
        width: 400px;
    }
}

我正在使用rails的约定，所以在我的视图模板中没有提到.js文件名或.scss文件名。

如何确保脚本仅在加载样式表后运行？

Answer 1

第1部分：特定于页面的JS：

在rails管道中查看针对特定于页面的JS的一种可能解决方案：https://stackoverflow.com/a/11975103/1162491

第2部分：应用CSS规则后运行JS：

我假设您的CSS已加载到应用程序布局的<head>中。在模板的底部，include the page-specific javascript与javascript_include_tag并在文档准备好时加载javascript。这应该可以解决你的问题;但是，作为this SO post shows，将样式表标记放在javascript标记之前可能并不总是会导致预期的行为，因为CSS是异步加载的。所以，正如该帖子中的一个答案所暗示的那样，

$(window).load(function() { $('#abc')...} );

可能始终表现优于$(document).ready()。

Answer 2

由于jquery的ready（）函数解释了（http://api.jquery.com/ready/），

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.

所以使用load（）方法可以解决你的问题。

$('#google-map').load(function() {
  initGoogleMap();
});

Rails：仅在加载CSS后运行Javascript

2 个答案: