이러한 Ajax가 페이지 요소를 더 이상 지연시키지 않을까요?

이 의사 코드를 사용하여 일부 json 파일을 검색하고 해당 내용을 컨텐츠 div에 넣습니다.이러한 Ajax가 페이지 요소를 더 이상 지연시키지 않을까요?

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <title>Test</title> 
    </head> 
    <body> 
     <div id="content"></div> 
     <script type="text/javascript" charset="utf-8"> 
      var my_files = ['http://example.com/file.json', 'http://example.com/file2.json']; 
      var params = { 
       format: 'json' 
      }; 
      function _populate_content(arg){jQuery("#content").text(arg)} 
      jQuery(my_files.each(function() { 
       jQuery.ajax({ 
        url: url, 
        dataType: 'jsonp', 
        data: params, 
        jsonpCallback: "_populate_content", 
       }); 
      }); 
     </script> 
     <div id="more_content"></div> 
    </body> 
</html>

원격 파일을 검색하는 데 다소 시간이 걸릴 수 있습니다. 내 질문은 :이 코드는 "more_content"-div로드 및 렌더링을 지연시킬 것입니까?

ajax 검색을 $ (document) .ready() 블록으로 묶는 것이 더 좋습니까?

출처

2011-03-30 Hobhouse

이 코드는 "more_content"-div의로드 및 렌더링을 지연합니까?

없음

, Ajax 호출이 비동기 때문에 (차단되지 않음).

$(document).ready() 블록에 아약스 검색을 묶는 것이 더 좋습니까?

예. 전체 DOM이 렌더링되면 Ajax 호출을 실행합니다.
~~Ajax 호출이 반환 될 때 ID가 content 인 요소를 사용할 수 있는지 여부를 100 % 확신 할 수는 없습니다.~~@BiAiB가 지적 했으므로 요소를 사용할 수 있습니다. 그래도 여전히 좋은 연습입니다. ,

jQuery.each(my_files, function() { jQuery.ajax({ url: url, dataType: 'jsonp', data: params, jsonpCallback: "_populate_content", }); });

어쩌면 이것은 단지가 옷을 벗었 예 : 당신은 당신의 코드가 모든 브라우저에서 작동 할 경우

, BTW, 당신은 jQuery의 each 아니라 내장을 사용한다 두 URL을 모두로드하는 것이 맞습니까? 두 번째 호출은 첫 번째 호출의 결과를 무시합니다 ...

출처

2011-03-30 09:11:42

실제로 #content 노드는 스크립트 앞에 나타나므로 그의 경우에는 괜찮습니다.하지만 이전 조건이 만족스럽지 않은 경우에 대비하여 $ (document) .ready()를 사용하는 것이 좋습니다. – BiAiB

@BiAiB : 오, 맞아 ... 그걸 알아 채지 못 했어. :) –

-1

예. 통화가 이루어지는 동안 브라우저가 차단됩니다. 페이지 작업이 수행되는 동안 렌더링/볼 수 있도록 대신 페이지로드에 대한 작업을 수행해야합니다

$(document).ready(function() { 
    jQuery(my_files.each(function() { 
    // etc... 
    })); 
});

출처

2011-03-30 09:11:09

http://api.jquery.com/jQuery.ajax/. async : false가 설정되어 있지 않으면 ajax() 호출이 차단되지 않습니다. –

아, 해명 해줘서 고마워. 내 이해와 완전히 반대. 건배! –

짧은 대답 : 예. .ajax() 매개 변수에 'async : false'를 정의하지 않았기 때문에 자바 스크립트는 비동기 적으로 실행됩니다. 즉, my_files 배열이 루프를 통해 비동기 호출을 시작하고 페이지를로드 할 때 계속됩니다.

로직을 $ (document) .ready()에 래핑하고 싶을 수도 있지만 more_content div에 해당 항목을 넣기 전에 잠시 후 사용자에게 정보를 알리십시오.

출처

2011-03-30 09:11:15

아약스 호출은 다른 방법으로 지정하지 않는 한 비동기 호출이됩니다. 따라서 페이지로드가 지연되지 않습니다.

출처

2011-03-30 09:11:25 BiAiB

아약스 호출은 비동기이므로 지연이 없습니다. 문서 준비 블록에 넣으면 브라우저가 전화를 걸기 전에 전체 페이지를 렌더링했는지 확인하십시오.

출처

2011-03-30 09:12:52

이러한 Ajax가 페이지 요소를 더 이상 지연시키지 않을까요?

답변

관련 문제