>웹 프론트엔드 >JS 튜토리얼 >jquery의 Ready() 메서드를 추출하여 단독으로 사용하세요.

jquery의 Ready() 메서드를 추출하여 단독으로 사용하세요.

WBOY
WBOY원래의
2016-05-16 16:54:321170검색

windows.onload 이벤트를 사용할 수 있지만 제 생각에는 페이지에 있는 모든 항목(img, iframe 및 기타 리소스)이 로드된 후에만 onload가 발생할 수 있습니다. 페이지에 표시됩니다. 실행하는 데 오랜 시간이 걸렸습니다.

DOM에서만 작업해야 한다면 페이지가 완전히 로드될 때까지 기다릴 필요가 없습니다. 더 빠른 방법이 필요합니다. Firefox에는 쉽게 해결할 수 있는 DOMContentLoaded 이벤트가 있지만 불행히도 IE는 그렇지 않습니다.

MSDN에는 JSCRIPT 메서드에 대한 눈에 띄지 않는 말이 있습니다. 페이지 DOM이 로드되지 않으면 doScroll 메서드가 호출될 때 예외가 생성됩니다. 그런 다음 이를 반대로 사용합니다. 예외가 없으면 페이지 DOM이 로드된 것입니다. 따라서 Mozilla 및 Opera 브라우저의 경우 dom 트리가 로드된 후 미리 만들어진 DOMContentLoaded 이벤트가 있습니다. Safari 브라우저의 경우 document.onreadystatechange 이벤트가 발생하면 document.readyState=complete이면 DOM 트리가 로드된 것으로 간주할 수 있습니다.

IE의 경우 iframe 내부에 있는 경우 document.onreadystatechange 이벤트도 있습니다. IE의 경우 iframe이 아닌 내부에 있는 경우 doScroll 실행 가능 여부로만 DOM 로드 여부를 판단할 수 있습니다.

이 예에서는 5밀리초마다 document.documentElement.doScroll('left')를 실행해 보세요. IE8에서는 iframe이 아닌 창을 볼 때 document.onreadystatechange 이벤트도 있습니다. 또한 자신만의 프레임을 만들 때 이 기능을 사용할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

(function(){
var isReady=false ; // onDOMReady 메소드가 실행되었는지 확인
var ReadyList= []; // 이 배열에 실행해야 하는 메소드를 임시로 저장합니다.
// 타이머 핸들

Ready=function(fn)
{
if (isReady )
fn.call( document);
else
ReadyList.push( function() { return fn.call( this); });
return this;
}
var onDOMReady=function(){
for(var i=0;i { isReady =true;
onDOMReady.call(window);
if(document.removeEventListener)
{
document.removeEventListener("DOMContentLoaded", binReady, false);
}
else if(document.attachEvent)
{
document.detachEvent("onreadystatechange",bindReady);
if(window == window.top){
clearInterval(timer);
타이머 = null;
}
}
};
if(document.addEventListener){
document.addEventListener("DOMContentLoaded", binReady, false);
}
else if (document.attachEvent)
{
document.attachEvent("onreadystatechange", function(){
if((/loaded|complete/).test(document.readyState))
binReady() ;
});
if(window == window.top)
{
타이머 = setInterval(function(){
try
{
isReady| |document.documentElement.doScroll('left');//DoScroll을 IE에서 실행할 수 있는지 여부를 사용하여 dom이 로드되었는지 확인
}
catch(e)
{
return;
}
바인딩Ready();
},5);
}
}
})();



사용방법:



코드 복사

코드는 다음과 같습니다.


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.