Rails：仅在加载CSS后运行Javascript

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>中。 在模板的底部，使用javascript_include_tag 包含特定于页面的javascript ，并在文档准备好时加载javascript。 这应该可以解决你的问题; 但是，正如此SO帖子所示，将样式表标记放在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 个解决方案

解决方案1
2 已采纳 2014-03-01 23:52:50

解决方案2
0 2014-03-02 01:13:13

Rails：仅在加载CSS后运行Javascript

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-03-01 23:52:50

解决方案2 0 2014-03-02 01:13:13

解决方案1
2 已采纳 2014-03-01 23:52:50

解决方案2
0 2014-03-02 01:13:13