레일 3 JQuery와 - document.ready없이 Application.js을 사용하는 방법() 나는 레일 3 JqueryUI-1.8.3를 사용하고

Question

). 페이지에서 사용자가 크기를 조정할 수 있도록하려는 이미지가 있습니다. 내 application.js에 다음과 같이 코드를 작성하면

<%= 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.html.erb은 다음과 같습니다

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

}); 이미지가 때로는 (페이지는 이미지를 표시하기 위해 새로 고쳐했다) 제대로 장착되지 않기 때문에

그러나, 위의 코드는 문제가있다. 이는 문서가 준비되었지만 이미지가로드되지 않았기 때문입니다.

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

그러나,이 크기를 조정할 수없는 이미지가 있습니다 (전용 이미지를 표시하지만 크기 조정) :

그래서 나는 새로 고침에 대한 요구를 해결하기 위해 application.js에 다음을 사용하여 생각하지 않습니다. 코드 (http://jsbin.com/iboxoy/40/edit#source),하지만 내 레일 코드에서 JSBin에 작동하는 것 같다. 언제든지 document.ready()를 사용하지 않으면 이미지가 레일즈 Jquery-UJS 코드에서 크기 조절 가능 상태를 유지하지 못합니다.

1. application.js 파일에 항상 document.ready()가 있어야합니까?
2. 왜 (#img) .load()이 경우에 작동하지 않는 이유는 무엇입니까?
3. 더 효율적으로 될 다른 해결책이있다.

고마워요!

Answer 1

문서 준비가 완료되고 이미지로드가 완료되면 크기 조정 가능 동작을 다시 바인딩하십시오.

I가

$ (문서) .ready()

을 변경하여 그것을 해결 - 사람이 미래에이 질문을 통해 오는 이런 경우에

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

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

Answer 2

$ (창) .loa d()

이것은 처음로드해야하는 이미지에 대해 작업을 수행하기 때문입니다. 이것으로 내가보고 있던 문제가 해결되었습니다.

$ ("# img1"). $ (document) .ready() 내의 load()가 작동하지 않습니다. 누군가가 왜 그런지 설명 할 수 있다면 좋을 것입니다. 내 생각 엔 이미지가로드되기 전에 문서가 준비된 것입니다 (이미지가 캐시에 없으면 페이지의 새 사용자와 $ ("# img1")에 대해 일반적입니다.) load()가 실행되지 않습니다. 문서가 준비되면로드 됨)