모든 HTML 페이지 렌더링이 수행 된 것을 감지합니다.

Question

매우 복잡한 .aspx 페이지로 작업 할 때 (예 : Telerik, Ajax 등) 페이지가 확장, 축소, 표시, 숨기기 등으로 가득 차 있습니다. 로드되었습니다. 이 렌더링은 클라이언트 측에서 발생하며 사용자 컴퓨터 사양에 따라 다른 시간이 걸릴 수 있으므로 모든 (또는 일부) 렌더링이 수행 된 시점을 감지하는 방법이 있습니까 (jQuery?) 그래서 특정 요소가 완전히 렌더링되었다는 것을 알고 있습니까?

Answer 1

자바 스크립트는 단일 스레드입니다. setTimeout으로 전달 된 시간은 최소이지만 최대 값이 아니므로 10 (ms)와 같이 전달하면 본질적으로 "현재 실행중인 모든 코드가 끝난 후에이 코드를 실행하십시오."라는 메시지가 표시됩니다. 모든 컨트롤은 자신의 일을 $(document).ready()를 사용하는 경우

그래서, 당신이 필요로하는 모든입니다 $(document).ready에 전달 된 모든 기능을 실행 한 후

$(document).ready(function() { 
    setTimeout(function() { 
     doStuff(); 
    },10); 
}); 

doStuff가 호출됩니다. 그러나 이것이 절대 안전한 것은 아닙니다. 컨트롤에 문서가로드되었는지 여부를 감지하는 고유 한 방법이 있거나 자체적으로 setTimeout()을 수행하는 경우 문제가 발생합니다. 문제는 JavaScript가 setTimeout의 실행 순서를 보장하지 않는다는 것입니다. 때로는 코드가 마지막으로 실행될 수 있으며, 다른 경우에는 setTimeout이 애니메이션에 사용되기 전에 실행될 수도 있습니다.

하나의 마지막 아이디어 : 모든 애니메이션이 jQuery를 사용하여 완료되면 효과는 단일 대기열에서 실행됩니다. doStuff에서 어떤 종류의 애니메이션 인 with a callback을 추가 할 수 있으며 콜백이 마지막으로 실행될 가능성이 충분히 있습니다.

Answer 2

나는 당신이 필요로하는 문서가 생각 :

http://docs.jquery.com/Events/load

Answer 3

"나는 그 때 완전히 렌더링 알고, 특정 요소에 따라 행동 할 수 있습니까?"

위에서 링크 된로드 메소드를 사용하여 모든 요소에 연결할 수 있습니다. 당신이 "lastElement로"의 ID로 사업부가 있다면 그래서, 당신은

$('div#lastElement).load(runThisFunction); 

Answer 4

당신은 jQuery를 $ (문서) .ready() 함수 내에서 코드를 배치해야합니다 작성할 수 있습니다. 이렇게하면 코드가 실행되기 전에 모든 요소가로드됩니다.

http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

Answer 5

진행하기 전에 여러 가지 준비가 될 때까지 기다려야 할 때마다 참/거짓 값이있는 배열을 만들 것입니다. 페이지의 모든 필수 부분은 이벤트가 발생하면 호출 될 때 배열의 특정 항목을 true로 업데이트합니다. 또한 배열의 모든 값이 true이면 true를 반환하고 그렇지 않으면 false를 반환하는 일반 함수를 호출했습니다.

이 함수가 마지막으로 true를 반환하면 실행을 계속합니다. AJAX 호출이 끝날 때까지 기다려야하지만 async = true를 사용하지 않으려는 경우 특히 유용합니다. 또한 여러 항목을 차례로로드하는 대신 한 번에로드하는 것을 시작하려는 경우 모두 유용합니다.로드가 모두 동일한 배열에 준비 상태를보고하기 때문입니다.

그러나 전역 변수를 사용하기 때문에 일부 최적화가 필요할 수 있습니다. 전역 변수에 대한 원한이있는 경우에도이 접근법을 사용하고 싶지 않을 수 있습니다.