Rails 3和Jquery - 如何使用Application.js without document.ready（）

我正在使用Rails 3和JqueryUI-1.8.3）。我希望用戶能夠調整頁面上的圖像。Rails 3和Jquery - 如何使用Application.js without document.ready（）

Application.html.erb如下：

<%= javascript_include_tag "application.js" %> 
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

當我在的application.js寫的代碼如下，該圖像是可調整大小：

 $(document).ready(function(){ 
     $("#img1").resizable({ handles:'n,e,s,w,ne,se,nw,sw' , maxHeight: 300, aspectRatio: true });

}）;

但是，上面的代碼有問題，因爲圖像有時不能正確加載（必須刷新頁面才能顯示圖像）。這是因爲雖然文檔已準備好，但圖像尚未加載。

所以我想用下面的的application.js修復需要刷新：

$("#img1").load(function() { 
    $("#img1").resizable({ handles:'n,e,s,w,ne,se,nw,sw' , maxHeight: 300, aspectRatio: true }); 
    });

然而，這使得圖像不調整大小（只顯示圖像，但沒有調整大小）。該代碼似乎在JSBin（http://jsbin.com/iboxoy/40/edit#source）上工作，但不在我的Rails代碼中。任何時候我不使用document.ready（），圖像在rails Jquery-UJS代碼中不會保持可調整大小。

application.js文件是否總是需要document.ready（）？
爲什麼（#img）.load（）在這種情況下不起作用？
有沒有其他解決方案更有效率？

謝謝！

來源

2011-10-05 Shantanu Bhalerao

嘗試在文檔準備就緒以及圖像加載完成時重新調整可調整大小的行爲。

$(document).ready(function(){ 
    $("#img1").resizable(); 

    $("#img1").load(function() { 
     $("#img1").resizable(); 
    }); 
}

來源

2011-10-05 11:29:59 cailinanne

當我使用上面給出的代碼時，圖像不再可以調整大小。是否因爲document.ready（）和（＃img1）.load（）不能一起使用？ –

啊，對不起，我想我現在明白了。有時圖像在$（document）.ready被觸發時已經被加載，有時它還沒有加載。查看修改後的答案 - 嘗試將可調整大小的行爲綁定兩次 – cailinanne

感謝您的回覆和評論。我仍然不得不第一次刷新頁面以獲取Chrome中的圖像（所以似乎沒有工作）。 –

萬一有人遇到這個問題，在未來的 -

我解決它通過改變

$（文件）。就緒（）

到

$（window）.loa d（）

這是因爲我們正在對需要首先加載的圖像執行操作。這解決了我所看到的問題。

不知何故$（「＃img1」）.load（）在$（document）.ready（）中不起作用。如果有人能解釋爲什麼會出現這種情況，那將會很棒。我的猜測是，在圖像加載之前文檔已準備就緒（如果圖像不在緩存中，對於頁面的新用戶和$（「＃img1」）。load（）不會被觸發（由於圖像不是當文檔準備就緒時加載）

來源

2011-11-17 03:33:34

Rails 3和Jquery - 如何使用Application.js without document.ready（）

回答

相關問題