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