순수 JavaScript jQuery& 그레이디 () - $ # 39 에 상응하는 함수를 호출하는 방법 / DOM 이 페이지를 보면 준비가

그래, 어쩌면 어리석은 질문을 할 수 있지만, 그냥 I& # 39 m 합니다 많은 다른 사람들이 때때로 같은 질문을 하고 있습니다. 저는 그냥 100% 정도 어느 쪽이든 싶다고 합니다. Jquery 우리 모두가 알고 있는 the wonderful

$('document').ready(function(){});

그러나 let& # 39, s say I want to 실행하십시오 기록되어 있는 기능을 제공하는 표준 라이브러리 백킹을 정보기술 (it), i want to 실행하십시오 기능을 javascript 없이 즉시 페이지는 준비됐어들 처리할 수 있습니다. # 39 의 what& 적절한 방법은 이?

내가 할 수 있다.

window.onload="myFunction()";

내가 '태그' 바디입니다 이어 사용할 수 있습니다.

<body onload="myFunction()">

내가 할 수 있지만, 심지어 시도하시겠습니까 이어 페이지 하단에 있는 그 모든 일을 및끝 '' 또는 '' 바디입니다 html 태그 다음과 같습니다.

<script type="text/javascript">
   myFunction();
</script>

What is a 크로스 브라우저 (이전 / new) 을 지원하는 방법을 하나 이상의 기능을 발행 방식으로 jQuery& 그레이디 () '의' $ # 39 와 같은?

질문에 대한 의견 (9)
해결책

가장 간단한 일인 않는 프레임워크입니다 크로스 브라우저 호환성 부재 속에 모든 것이 그냥 동일팔레트에 당신꺼에요 코드에 대한 요청 끝에 바디입니다. 이 때문에 '가 더 빠르게 실행할 수 있는' 이 기다리는 것보다 처리기에서 onload 에 대해서만 아니라 불러오시길 모μç 이미지에 대한 DOM 을 사용할 수 있습니다. 그리고 이 모든 브라우저 작동합니다.






Your HTML here

<script>
// self executing function here
(function() {
   // your page initialization code here
   // the DOM will be available here

})();
</script>

대한 최신 브라우저 (이르는 모든 및 최신 IE9 크롬, 파이어폭스 또는 Safari 및 모든 버전의 경우) $ (document) 그레이디 jQuery 원하는걸까요 구축할 수 있게 할 수 있는 'like' () 메서드를 호출 어디서부터든 (걱정하지 않고 있는 것은 호출하십시오 스크립트입니다 포지셔닝됩니까) 이 같은 일이 바로 사용할 수 있습니다.

function docReady(fn) {
    // see if DOM is already available
    if (document.readyState === "complete" || document.readyState === "interactive") {
        // call on next available tick
        setTimeout(fn, 1);
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}    

사용법:

docReady(function() {
    // DOM is loaded and ready for manipulation here
});

필요한 경우 전체 크로스 브라우저 호환성 (등 이전 버전의 IE) ',' t want to wait for 빈다우드로 로이드 don& 진실이며당신이 # 39, 그러면 아마 프레임워크입니다 jQuery 는 $ (document) '같이 가야 한다고 살펴보면서 그레이디 () 는' 메서드입니다. # 39 의 기능에 따라 공정하게 it& 관련 브라우저.

Jquery 는 전달자로써 너희에의 리틀이에요 뭔지 (언제 어디서나 사용할 수 있는 스크립트입니다 태그번호 배치되는).

It 가 지원되는 경우, 표준:

document.addEventListener('DOMContentLoaded', fn, false);

수신기마다 대체.

window.addEventListener('load', fn, false )

이전 버전의 IE, 충족하거나 사용한다.

document.attachEvent("onreadystatechange", fn);

수신기마다 대체.

window.attachEvent("onload", fn);

그리고, 몇 가지 해결 방법을 IE 에서 코드 경로를 따라 it looks like 꽤 있지만, 제가 don& t # 39 프레임이면 관련이 있다.

다음은 jQuery& 그레이디 () ',' s # 39 의 전체 대체하십시오 기록되었으므로 분명 javascript:

(function(funcName, baseObj) {
    // The public function name defaults to window.docReady
    // but you can pass in your own object and own function name and those will be used
    // if you want to put them in a different namespace
    funcName = funcName || "docReady";
    baseObj = baseObj || window;
    var readyList = [];
    var readyFired = false;
    var readyEventHandlersInstalled = false;

    // call this when the document is ready
    // this function protects itself against being called more than once
    function ready() {
        if (!readyFired) {
            // this must be set to true before we start calling callbacks
            readyFired = true;
            for (var i = 0; i < readyList.length; i++) {
                // if a callback here happens to add new ready handlers,
                // the docReady() function will see that it already fired
                // and will schedule the callback to run right after
                // this event loop finishes so all handlers will still execute
                // in order and no new ones will be added to the readyList
                // while we are processing the list
                readyList[i].fn.call(window, readyList[i].ctx);
            }
            // allow any closures held by these functions to free
            readyList = [];
        }
    }

    function readyStateChange() {
        if ( document.readyState === "complete" ) {
            ready();
        }
    }

    // This is the one public interface
    // docReady(fn, context);
    // the context argument is optional - if present, it will be passed
    // as an argument to the callback
    baseObj[funcName] = function(callback, context) {
        if (typeof callback !== "function") {
            throw new TypeError("callback for docReady(fn) must be a function");
        }
        // if ready has already fired, then just schedule the callback
        // to fire asynchronously, but right away
        if (readyFired) {
            setTimeout(function() {callback(context);}, 1);
            return;
        } else {
            // add the function and context to the list
            readyList.push({fn: callback, ctx: context});
        }
        // if document already ready to go, schedule the ready function to run
        if (document.readyState === "complete") {
            setTimeout(ready, 1);
        } else if (!readyEventHandlersInstalled) {
            // otherwise if we don't have event handlers installed, install them
            if (document.addEventListener) {
                // first choice is DOMContentLoaded event
                document.addEventListener("DOMContentLoaded", ready, false);
                // backup is window load event
                window.addEventListener("load", ready, false);
            } else {
                // must be IE
                document.attachEvent("onreadystatechange", readyStateChange);
                window.attachEvent("onload", ready);
            }
            readyEventHandlersInstalled = true;
        }
    }
})("docReady", window);

깃허브 dell. (https://github.com/jfriend00/docReady) 에서 공개적으로 공유되므로 최신 버전의 코드

사용법:

// pass a function reference
docReady(fn);

// use an anonymous function
docReady(function() {
    // code here
});

// pass a function reference and a context
// the context will be passed to the function as the first argument
docReady(fn, context);

// use an anonymous function with a context
docReady(function(context) {
    // code here that can use the context argument that was passed to docReady
}, ctx);
  • 이 테스트되었습니다 위치:

<! - 언어: &gt 랑 없음 -;

IE6 and up
Firefox 3.6 and up
Chrome 14 and up
Safari 5.1 and up
Opera 11.6 and up
Multiple iOS devices
Multiple Android devices

와 테스트 베드를 구축 작업: http://jsfiddle.net/jfriend00/YfD3C/

39 의 어떻게 작동하잖아 here& 요약:

  1. 생성하시겠습니까 [인생] (http://benalman.com/news/2010/11/immediately-invoked-function-expression/) (즉시 기도하였나니 함수은 표현식에서는) 할 수 있도록 비공개 상태변수.
  2. 너희가운데 함수은 도크리디 (fn, 컨텍스트로) '' 공개
  3. (Fn 컨텍스트로) ',' 여부를 확인할 때 도크리디 호출됨 준비됐어들 처리기에서 이미 실패했다. 그렇다면 이 우아한 JS 마친 직후 새로 추가된 콜백하는 스케줄링하는 그냥 불을 setTimeout (fn, 1) '을 (를)'.
  4. 이 경우 아직 준비됐어들 처리기에서 목록에 추가하고, 해고 등 새로운 콜백하는 콜백 불릴 수 있다.
  5. 이 문서는 있는지 이미 준비되었음. 그렇다면 모든 준비 실행하십시오 핸들러도.
  6. 만약 우리가 설치할 때, 아직 알 수 없는 이벤트 리스너에 haven& # 39 가 준비된 문서, 그럼 지금 설치합니다.
  7. '존재' 를 사용하는 경우, 다음 이벤트 핸들러도 도쿠망드라데벤트리스트너 자야데벤트리스트너 () ',', '와', ',' 모두를 위한 &quot DOMContentLoaded&quot &quot load&quot 이벤트. 이 &quot load"; 는 백업 안전을 위한 이벤트를 할 필요가 없습니다.
  8. 만약 't', '# 39 를 사용하여 이벤트 핸들러도 도쿠망드라데벤트리스트너 doesn& 타임코드가 관심용 오스타슈벤트 ()', ',' 와 ',' 이벤트를 위한 &quot onreadystatechange&quot &quot, onload&quot.
  9. 모리디국가창레 '에서' 이벤트 ',' 그렇다면 complete&quot 도쿠망드리디국가 = &quot 있는지 확인합니다, 함수를 불지옥의 호출하십시오 모든 준비됐어들 핸들러도.
  10. 이 모든 다른 이벤트 핸들러도 함수를 불지옥의 호출하십시오 모든 준비됐어들 핸들러도.
  11. 상태 변수, 함수 호출 확인을 볼 수 있는 모든 준비됐어들 핸들러도 we& # 39, ve 경우 이미 실패했다. 만약 이 경우, 아무것도 하지 않습니다. 만약 우리가 아직 haven& 어졌다면 반복하고, t # 39 라는 배열에 준비됐어들 기능과 매입옵션 각각 순서대로 추가되었다. 플래깅 설정할 수 있도록 하고 모든 통화를 한 번 이상 실행됨을 나타내십시오 용기가 없다.
  12. 폐쇄된 모든 기능을 사용할 수 있을 수 있어 선택해제합니다 어레이입니다 풀려났다.

등록된 핸들러도 도크리디 () '이' 해고 순서에 따라 레지스터링 보장받을 수 있었다.

전화하시기 경우 (fn) ',' 도크리디 후 즉시 실행할 수 있는 문서를 이미 준비됐어들 콜백하는 적립율은 스케줄링된 현재 실행 스레드할 사용하여 완료하는지 setTimeout (fn, 1) '.' 이렇게 하면 항상 비동기 콜백 코드 호출하십시오 solaris. 이들은 나중에 나중에 사용할 경우에도 즉시 불렀으매 는 현재 JS 마감 및 정보기술 (it) 의 스레드할 오더할 호출하십시오 유지합니다.

해설 (16)

여기에 몇 가지 가능한 방법으로 하라님의 싶습니다 순수 javascript 함께 작동하는 것이 모든 브라우저 :

// with jQuery 
$(document).ready(function(){ /* ... */ });

// shorter jQuery version 
$(function(){ /* ... */ });

// without jQuery (doesn't work in older IEs)
document.addEventListener('DOMContentLoaded', function(){ 
    // your code goes here
}, false);

// and here's the trick (works everywhere)
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
// use like
r(function(){
    alert('DOM Ready!');
});

여기 이 기법을 통해 설명한 것처럼 원본 작가 재산이잖아 도쿠망드리디국가 도래하도록하려하는 우리는 확인 String '이 포함되어 있으면' 같이 '비초기화' 와 '로드중', 처음 두 DOM 준비 상태 5 점 만점에) 우린 시간초과했습니다 설정 및 다시 확인합니다. 그렇지 않으면 우리는 실행하십시오 함수은 통과시켰다.

39 의 [이스피들], [3] 을 및 here& 있는 모든 browsers. 작동됨 트릭

이 덕분에 투토리아르지나 등 대한 그들의 책.

해설 (11)

일반 수행할 경우, 바닐라, 그러면 JavaScript 없이 jQuery 를 사용해야 합니다. (,, 빨리, 빨리 Internet&amp Explorer&amp 9 이상):

document.addEventListener("DOMContentLoaded", function(event) {
    // Your code to run since DOM is loaded and ready
});

Jquery '그레이디 위에 해당하는':

$(document).ready(function() {
    console.log("Ready!");
});

Jquery 는 다음과 같이 쓸 수 있는 대표 수도 있다고 해도, 이는 이후 실행하십시오 준비됐어들 테스트타사의.

$(function() {
    console.log("ready!");
});
  • 혼동하지 않도록 아래 * (DOM 수 없는 것은 준비됐어들):

이렇게 사용하지 않는 ui_policytable_java_spe_policy 인생 즉 자체 실행:

 Example:

(function() {
   // Your page initialization code here  - WRONG
   // The DOM will be available here   - WRONG
})();

이 인생 진정하라구요 단축시킵니다 DOM 로드하기에 않습니다. (# 39 m, 심지어 크롬 브라우저 최신 버전의 I& 얘기하는!)

해설 (3)

또한 파이어폭스, 크롬, 최신 IE9 에서 테스트되었습니다 IE8 에서 지원되는.

document.onreadystatechange = function () {
  var state = document.readyState;
  if (state == 'interactive') {
      init();
  } else if (state == 'complete') {
      initOnCompleteLoad();
  }
}​;

예: http://jsfiddle.net/electricvisions/Jacck/

  • 재사용 가능한 버전 업데이트 - *

이제 막 개발했습니까 다음과 같습니다. # 39 의 it& 상투적이고 Dom 또는 하위 호환성을 위해 준비 없이 좀 avamer 포함한다. 아마도 더 필요한 게다. 크롬, 파이어폭스 및 테스트를 통해 최신 버전의 IE (10/11) 와 이전 버전의 브라우저와 /dev/raw/raw200 작업하십시오 대해 아무런 언급도 하지 않고 있다. # 39, ll 업데이트하십시오 i& 찾을 수 있다면 좋겠지만, 문제.

window.readyHandlers = [];
window.ready = function ready(handler) {
  window.readyHandlers.push(handler);
  handleState();
};

window.handleState = function handleState () {
  if (['interactive', 'complete'].indexOf(document.readyState) > -1) {
    while(window.readyHandlers.length > 0) {
      (window.readyHandlers.shift())();
    }
  }
};

document.onreadystatechange = window.handleState;

사용법:

ready(function () {
  // your code here
});

39 의 기록되었으므로 it& 처리할 수 있지만 이 경우는 로드하십시오 스크립트입니다 you& 동기화하려면 비동기 읽어들이기를 JS # 39, re 미니프잉 먼저 할 수 있습니다. # 39, ve i& 개발에 유용한 그것을 발견했다.

비동기 브라우저 기능도 지원할 수 있는 현대 읽어들이기를 스크립트에만 강화 경험하십시오. 동시에 여러 스크립트를 동시에 다운로드할 수 있는 모든 페이지 렌더링을 지원하기 위해 비동기 의미합니다. 그냥 보고 있을 때 다른 스크립트를 사용하거나 또는 같은 일이 브라우세리피 미네이피어 비동기적으로 로드되었는지 아웃해야 따라 처리할 수 있도록 종속물과의.

해설 (2)

좋은 사람들이 dell. 후브스포트 투명지에 리소스에는 비롯한 많은 좋은 성과를 얻을 수 있는 곳 '준비' 순수 Javascript 방법론에 대한 jQuery

http://youmightnotneedjquery.com/ # 준비됐어들

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

인라인 사용 예:

ready(function() { alert('hello'); });
해설 (3)

39 m i& 아니고, 어떤 것을 도울 수 있지만, 어쩌면 이 you& # 39, re 합니다.

window.onload = function(){
    // Code. . .

}

또는:

window.onload = main;

function main(){
    // Code. . .

}
해설 (3)

방법 (배치 전에 닫기와 스크립트입니다 바디입니다 태그)

<script>
   myFunction()
</script>

신 · 구 브라우저 안정적으로 지원할 수 있다.

해설 (2)

준비됐어들

function ready(fn){var d=document;(d.readyState=='loading')?d.addEventListener('DOMContentLoaded',fn):fn();}

같은 사용

ready(function(){
    //some code
});

자가 된 코드

(function(fn){var d=document;(d.readyState=='loading')?d.addEventListener('DOMContentLoaded',fn):fn();})(function(){

    //Some Code here
    //DOM is avaliable
    //var h1s = document.querySelector("h1");

});

지원: IE9+

해설 (1)

39, s, 사용하여 비사양 eval 버전니다 here& 청소 업 ram-swaroop& # 39 의] 이 모든 browsers&quot "; 다양한 작품을 모든 브라우저에서!

function onReady(yourMethod) {
  var readyStateCheckInterval = setInterval(function() {
    if (document && document.readyState === 'complete') { // Or 'interactive'
      clearInterval(readyStateCheckInterval);
      yourMethod();
    }
  }, 10);
}
// use like
onReady(function() { alert('hello'); } );

그러나 추가 10ms/ 진정하라구요 않니다 실행하십시오 도왔으매 here& # 39 더 복잡한 방식으로 shouldn& # 39, s, t:

function onReady(yourMethod) {
  if (document.readyState === 'complete') { // Or also compare to 'interactive'
    setTimeout(yourMethod, 1); // Schedule to run immediately
  }
  else {
    readyStateCheckInterval = setInterval(function() {
      if (document.readyState === 'complete') { // Or also compare to 'interactive'
        clearInterval(readyStateCheckInterval);
        yourMethod();
      }
    }, 10);
  }
}

// Use like
onReady(function() { alert('hello'); } );

// Or
onReady(functionName);
      • Https://stackoverflow.com/questions/8100576/how-to-check-if-dom-is-ready-without-a-framework 참조
해설 (0)

하지만 이 전략은 '도쿠망.온동콘텐트레이디 = 함수 () {}' 어떻게해야합니다 doesn& # 39, 전체 브라우저 호환성을 없다.

Jquery 분 같다 그냥 사용할 수 있습니다.

해설 (5)