2016-07-27 2 views
-1

ID를 사용하여 동일한 도메인의 다른 페이지에서 HTML 블록을 렌더링하는 페이지가 있습니다. 현재 코드 :DOM 준비 전에 jQuery로드 함수 사용

<div id=”testdiv”></div> 
<script> 
jQuery(document).ready(function(){ 
    jQuery('#testdiv').load('/references/embed1.html #testdiv2'); 
}); 
</script> 

이 내용이 올바르게로드되는 동안 페이지로드와 jQuery 컨텐츠로드 사이에 눈에 띄는 지연이 있습니다. DIV 내용에 따라 때로는 전체 초를 표시하고 그 자리에 그냥 나타납니다. 이는 DOM 준비가 될 때까지 HTML 컨텐트를 검색하려고 시도하지 않는 페이지 때문일 수 있으므로 준비 기능을 제거했지만로드 기능은 실행되지 않습니다. 대신 iFrame을 사용하면 브라우저가 코드를 실행하면서로드되는 것처럼 보이지만 특정 DIV ID 만 포함 할 수는 없으므로 반응이 좋지 않습니다. $ .ajax를 보았지만 분명히 Load는 .ajax를 사용하므로 차이가있을 것 같지 않습니다.

간단히 말해서 - DOM을 기다리지 않고 다른 페이지에서 특정 DIV ID를로드하려면 어떻게해야합니까? jQuery, JavaScript, iFrames 또는 기타 방법에 상관없이 Ready? 두 번째 질문

감사합니다.

+0

간단 ... 제거 'jQuery를 (문서) .ready (함수() {'. 그것은 * 잘 작동합니다입니다 당신의 질문에 * 있습니다.하지만 여전히 지연이있을 수 있습니다. 첫 번째 장소에서이 내용을 얻기 위해 아약스를 사용할 필요성을 제거하는 것 이외에는 제거 할 수없는 것입니다. –

+0

왜 투표가 실패합니까? 또한,이 게시물 http://stackoverflow.com/questions/15107074/jquery-load-not-working 같은 문제와 해결책은 DOM 준비가되어 있습니다. – user1754738

+1

잘 작동합니다. 그렇지 않은 경우 , 귀하의 질문에 귀하의 예제가 실제로 사용하는 코드와 일치하지 않는다는 것을 의미합니다. dom 요소와 관련된 스크립트의 위치는 매우 중요합니다. –

답변

-4

아약스가 순식간이 아니며, 아무 것도 변경되지 않습니다. 따라서 항상 지연되는 형태가있을 것입니다. $(document).ready()에 대한 필요성을 제거함으로써 지연을 줄일 수는 있지만, 나는 그것이 당신이 원하는 것을하기에 충분하지 않을 것으로 생각합니다.

$.get('page.html', function (result) { 
    // note, you may need to use `.filter` rather than `.find` depending on the structure of `result` 
    $('#target').html($($.parseHTML(result)).find('#target2')); 
}); 

또는 $(document).ready 마이너스로 코드를 떠나 당신의 예에서와 같이 대상 DIV 이후로 이동합니다.

지연을 완전히 제거하는 유일한 방법은 html을 페이지 서버쪽에 직접 삽입하여 $.ajax을 사용할 필요를 제거하는 것입니다.

-2

document ready은 전체 페이지가로드 될 때까지 실행되고, 제거하면 #testdiv이 DOM에서 렌더링 완료 후 .load()이 호출됩니다. 여기로 ** 정확히 ** 예

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 

<div id="testdiv"></div> 
<div id="error"></div> 

<script> 
$("#testdiv").load("/references/embed1.html #testdiv2", function(response, status, xhr) { 
    alert("Triggered"); 
    if (status == "error") { 
    var msg = "Err trying to load "; 
    $("#error").html(msg + xhr.status + " " + xhr.statusText); 
    } 
}); 
</script> 
코드 인 경우

https://jsfiddle.net/Angel_xMu/rer3yuny/1/