2012-11-28 4 views
0

현재 내 페이지에 제 3 자 자바 스크립트 파일을 직접 임베드하고 있습니다.임베디드 자바 스크립트를 아약스로 변환

그러나 내가 포함시키고있는 웹 사이트는 응답하는 데 시간이 걸리므로 몇 초 동안 사이트 렌더링이 중단됩니다.

가 일부 값 쓰기 곳에 나는 현재 자리에서 내 페이지를 내장하고있어 :

document.write('<div class="value">Value 1</div><div class="value">Value 2</div>'); 

내가했다 :

<script language="javascript" type="text/javascript" src="[third-party site/file.js]"></script> 

포함 된 스크립트의 응답은 그냥 자바 스크립트입니다 페이지가로드 된 후 jQuery를 사용하여 AJAX 요청을 만들고 어떻게 든 응답을 구문 분석하면 필요한 값을 얻을 수 있다고 생각했습니다.

더 나은 방법이 있습니까?

+0

는 참조 http://developer.yahoo.com/performance/rules.html#js_bottom –

답변

0
$(document).read(function() 
{ 
    $.getScript(/* src */) 
}); 

페이지가로드 된 후에 실행됩니다.

$.getScript()

+0

그러나 스크립트의 반환이 "document.write를 ..."어떻게 값을 배치 할 수있을 것입니다 내가 원하는 위치에. $ .getScript()를 사용하면 ???에서 호출 된 값을 쓸 것입니다. –

+0

1

당신은 (단지 </body> 전) 신체의 끝 부분에 숨겨진 요소 내에이 스크립트를 배치 할 수 있고, 페이지가로드 된 후, jQuery를 사용하여 원하는 위치로 이동합니다.

<div id="hiddenElement"> 
     <script type="text/javascript" src="[third-party site/file.js]"></script> 
    </div> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#hiddenElement").appendTo("#someOtherElement"); 
     }); 
    </script> 
</body> 

또 다른 해결책은 당신이 말한과 @ 제임스 맥도넬 말했듯이 원하는 위치에 스크립트를로드 jQuery를 .getScript()을 사용하는 것입니다.

0

아마도 이것은 솔루션의 일부일 수 있습니다. 다음은 DIV에서 변경 이벤트를 트리거하는 데 사용되는 독립 실행 형 jQuery 예제입니다. 이 예제는 div의 HTML 컨텐트에 액세스하는 방법과이를 조작/변경하는 방법을 보여줍니다. 이것은 당신을위한 해결책은 아니지만 rcdmk 및 James의 아이디어와 함께 사용하면 유용 할 수 있습니다.

<html> 
    <head> 
     <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>--> 
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('#button_test').click(function() { 
        $('.value').html('New stuff').change(); 
       }); 
       $('.value').change(function(){ 
        $('div').each(function() { 
         alert($(this).html()); 
        }); 
       }); 
      }); 
     </script> 
    </head> 
<body> 


<div class="value">Value 1</div> 
<div class="value">Value 2</div> 
<button id="button_test">Click me</button> 
관련 문제