jquery 준비 함수 소스 코드 Research_jquery

일반적인 상황에서 body 태그의 onload는 창의 로드 이벤트를 수신하도록 설정됩니다. 그러나 페이지에 그림이 많을 경우 페이지의 모든 요소가 로드될 때까지 로드 이벤트가 트리거되지 않습니다. 너무 크면 초기화 코드가 실행되지 않습니다. Jquery 라이브러리는 매우 편리하고 사용하기 쉬운 함수($(selector).ready())를 제공합니다. 페이지의 DOM이 로드된 후 해당 작업을 수행합니다(물론 이는 사용자 브라우저의 지원에 따라 다름). 예:
$(document).ready (function (){ 경고('페이지 스크립트 태그에서 사용') } );
$(document).ready(function (){ 경고('가져오기 js 파일에서 사용')
이제
원리:
jquery 스크립트가 로드되면 isReady 태그가 DOMContentLoaded 이벤트를 수신하도록 설정됩니다. 이는 모든 브라우저에서 일반적이지 않으며 jquery는 서로 다른 브라우저에서 다르게 작동합니다. 물론, 준비 함수가 호출될 때 isReady가 설정되지 않은 경우 이는 페이지가 로드되지 않았음을 의미하며 실행될 함수는 페이지가 로드될 때 캐시된 함수입니다.
Jquery에서 코드 상세 분석 :

코드 복사

ready: function(fn ) {
// 바인딩 리스너
binReady()
// DOM이 로드된 경우
if (jQuery .isReady)
// 이 함수를 즉시 실행합니다
                      fn.call (document, jquery)
// 그렇지 않으면
Else
// 캐시 배열에 함수를 추가합니다
jquery.readylist.push (function () {RETURN FN.Call (this, this, this, this, this, this, this, jQuery); } ); >

코드 복사


코드는 다음과 같습니다.

var ReadyBound = false;
functionbinReady(){
if(readyBound ) return;
readyBound = true; 이벤트
if ( document.addEventListener && !jQuery.browser.opera)
// 이벤트 콜백을 직접 사용하세요
document.addEventListener( "DOMContentLoaded", jQuery.ready, false )

// IE이고 프레임에 내장되지 않은 경우
// 문서가 로드되었는지 지속적으로 확인해야 합니다
if ( jQuery.browser.msie && window == top ) (function(){
                                                             if (jQuery.error ) {
//// 이 장소를 표시하고 나중에 구문 분석합니다(2)
setTimeout( 인수.callee, 0 );
반환
}
// 대기 중인 함수를 실행합니다.
jQuery.ready();
})()

if ( jQuery.browser.opera )
document.addEventListener( "DOMContentLoaded", function () {
if (jQuery.isReady) return;
for (var i = 0; i < document.styleSheets.length; i ) // 마커 (3)
if (document.styleSheets [i].disabled) {
                                                                                            > 🎜> ( function(){
if (jQuery.isReady) return;
if ( document.readyState != " 로드됨" && document.readyState != "complete" ) { // Mark(4)
                                                     numStyles = == 정의되지 않음 )
numStyles = jQuery("style, link[rel=stylesheet]").length
if ( document.styleSheets.length != numStyles ) { // 마커(5)
setTimeout ( 인수. 호출자, 0 );
                         return; 🎜> }

// 항상 작동하는 window.onload
jQuery.event.add( window, "load", jQuery.ready ); // 마커(6)
}
}



(1): 이것은 주로 IE에서 준비된 DOM을 측정하기 위한 것입니다. 원칙은 여기 http://javascript.nwbox.com/IEContentLoaded/이며, DOM이 그렇지 않은 경우 사용할 수 있습니다. 구문 분석이 완료되면 Document의 document.documentElement.doScroll("left") 호출이 잘못됩니다. 이 작은 트릭은 dom이 준비되었는지 확인하는 데 도움이 될 수 있습니다.
(2):setTimeout(arguments.callee, 0)은 지연을 의미합니다. 0초 동안 호출하면 실제로는 즉시 호출되지 않지만 가능한 한 빨리 호출됩니다. 이는 현재 보류 중인 이벤트에 대해 이벤트 핸들러를 실행하고 그 전에 문서의 현재 상태 업데이트를 완료하도록 지시합니다. Arguments.callee는 매개변수의 호출자인 외부 익명 함수입니다.
(3): 이에 대해 이상하다고 느낄 수 있습니다. 왜 Mozilla로 처리하지 않습니까? 그 이유는 Opera의 DOMContentLoaded 이벤트가 발생한 후입니다. 해당 CSS 스타일은 아직 완전히 사용 가능하지 않으므로 각 CSS 태그가 활성화되었는지 확인하려면 특별한 처리가 필요합니다.
(4), (5): Safari에서 document.readyState 상태가 로드되거나 완료되면 CSS가 완료됩니다. 파일이 아직 도입되지 않았습니다. 파싱되었는지 확인하므로 CSS 파일 수를 판단해야 합니다.
(6): 마지막으로 위 해킹이 지원되지 않으면...가장 안전한 로드 이벤트를 사용하여 보장합니다. 초기화 코드를 실행할 수 있다는 것입니다.