복붙노트

[JQUERY] jQuery의 $ .ready의 순수 자바 스크립트 상당 () - 함수를 호출하는 방법을 페이지가 / DOM은 그것을위한 준비가되면 [중복]

JQUERY

jQuery의 $ .ready의 순수 자바 스크립트 상당 () - 함수를 호출하는 방법을 페이지가 / DOM은 그것을위한 준비가되면 [중복]

해결법

  1. 1.가장 간단한 것은 당신이 단지 신체의 끝 부분에 코드에 전화를 넣어하는 것입니다에 대한 모든 브라우저 간 호환성을 수행하는 프레임 워크의 부재에서 할 수 있습니다. 이 단지 DOM이 대기하지 부하에 모든 이미지에 대한 준비가되어 때문에 온로드 핸들러보다 실행 빠릅니다. 그리고,이 모든 브라우저에서 작동합니다.

    가장 간단한 것은 당신이 단지 신체의 끝 부분에 코드에 전화를 넣어하는 것입니다에 대한 모든 브라우저 간 호환성을 수행하는 프레임 워크의 부재에서 할 수 있습니다. 이 단지 DOM이 대기하지 부하에 모든 이미지에 대한 준비가되어 때문에 온로드 핸들러보다 실행 빠릅니다. 그리고,이 모든 브라우저에서 작동합니다.

    <!doctype html>
<html>
<head>
</head>
<body>
Your HTML here

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

})();
</script>
</body>
</html>

    최신 브라우저 (어떤 IE9에서와 새와 크롬, 파이어 폭스 나 사파리의 모든 버전)를 들어, 걱정에 대한없이 $처럼 당신이 어디에서 호출 할 수있는 (문서) .ready () 메소드 (A jQuery를 구현 할 수 있도록하려면 호출 스크립트)에 배치되는 경우, 당신은 단지 같은 것을 사용할 수 있습니다 :

    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의 이전 버전 포함) 전체 크로스 브라우저 호환성이 필요하면 그때는 아마 .ready jQuery를 같은 프레임 워크는 $ (문서)를 구현하는 방법을 살펴 가야, 창로드 기다리지 않으려면 . 그것은 매우 브라우저의 기능에 따라 참여합니다.

    당신이 jQuery를이 (스크립트 태그가 배치 위치에 관계없이 작동합니다) 무엇 약간의 아이디어를 제공합니다.

    지원되는 경우, 표준 시도 :

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

    대체에와 :

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

    또는 IE의 이전 버전의 경우, 사용

    document.attachEvent("onreadystatechange", fn);

    대체에와 :

    window.attachEvent("onload", fn);

    그리고, 거기에 내가 매우 따르지 않는 것을 IE 코드 경로에 몇 가지 작업 차선책이 있지만,이 프레임 함께 할 수있는 뭔가가있는 것 같습니다.

    다음은 일반 자바 스크립트로 작성된 jQuery의 .ready ()에 대한 완전한 대체는 다음과 같습니다

    (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);

    코드의 최신 버전은 https://github.com/jfriend00/docReady에서 GitHub의에서 공개적으로 공유

    용법:

    // 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);

    이것은 테스트되었습니다 :

    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/

    여기 그것이 작동하는 방법의 개요는 다음과 같습니다

    docReady ()에 등록 된 핸들러들은 등록 된 순서대로 해고 보장됩니다.

    문서가 이미 준비 후 docReady (FN)를 호출하면, 콜백에서는 setTimeout (FN, 1)을 사용하여 실행 완료의 현재 스레드를 즉시 실행하도록 예약됩니다. 이것은 나중에 JS 마감의 현재 스레드 즉시이며이 순서를 호출 보존 경우에도 항상에 호출 코드가 나중에 호출되는 비동기 콜백 있다고 가정 할 수 있습니다.

  2. 2.나는 모든 브라우저에서 작동하는 순수 자바 스크립트 트릭과 여기에 함께 할 수있는 몇 가지 방법을 언급하고 싶습니다 :

    나는 모든 브라우저에서 작동하는 순수 자바 스크립트 트릭과 여기에 함께 할 수있는 몇 가지 방법을 언급하고 싶습니다 :

    // 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!');
});

    원래 저자에 의해 설명 된 바와 같이 트릭은 여기, 우리가 document.readyState 속성을 확인하는 것입니다. 이 문자열을 포함하는 경우 (초기화 및로드에서와 같이 5 점 만점 처음 두 DOM 준비 상태) 우리는 시간 제한을 설정하고 다시 확인. 그렇지 않으면, 우리는 전달 기능을 실행합니다.

    그리고 여기에 모든 브라우저에서 작동 트릭의 jsFiddle을합니다.

    자신의 책이를 포함한 Tutorialzine 감사합니다.

  3. 3.당신이 jQuery를하지 않고 바닐라 일반 자바 스크립트를 수행하는 경우, 당신은 (나중에 인터넷 익스플로러 9)를 사용합니다 :

    당신이 jQuery를하지 않고 바닐라 일반 자바 스크립트를 수행하는 경우, 당신은 (나중에 인터넷 익스플로러 9)를 사용합니다 :

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

    위는 .ready jQuery를하는 것과 동일합니다 :

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

    준비도가 발생한 후 jQuery를 실행할이 같은 ALSO 기록 할 수있는 속기.

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

    (하지 DOM 준비를 의미하는) 아래에 혼동되지 않기 :

    DO는 실행 자체가이 같은 인생을 사용하지 :

     Example:

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

    이 인생로드로 DOM 기다리지 않습니다. (I 크롬 브라우저의 최신 버전에 대해 얘기도 있어요!)

  4. 4.IE9에서 테스트하고, 파이어 폭스와 크롬 최신 또한 IE8에서 지원.

    IE9에서 테스트하고, 파이어 폭스와 크롬 최신 또한 IE8에서 지원.

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

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

    UPDATE - 재사용이 가능한 버전

    난 그냥 다음을 개발했습니다. 그것은 이전 버전과의 호환성없이 jQuery를 또는 돔 준비에 오히려 단순한 상당합니다. 아마 더 정제를 필요로한다. 크롬, 파이어 폭스와 IE (10/11)의 최신 버전에서 테스트에 댓글로 이전 버전의 브라우저에서 작동합니다. 내가 어떤 문제를 발견하면 나는 업데이 트됩니다.

    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
});

    그것은 JS의 핸들 비동기 로딩에 기록되어 있지만이 스크립트 먼저하지 않는있는 거 파일 축소 싱크로드 할 수 있습니다. 내가 개발에 유용하다고했습니다.

    현대 브라우저는 스크립트를 더욱 강화합니다 경험의 비동기 로딩을 지원합니다. 비동기에 대한 지원은 여전히 ​​페이지를 렌더링하는 동안 여러 스크립트를 동시에 모두 다운로드 할 수 있다는 것을 의미합니다. 그냥 다른 스크립트에 의존하는 경우 비동기 적으로로드 된주의 또는 핸들 종속성에 browserify 같은 minifier 또는 무언가를 사용합니다.

  5. 5.허브 스팟 (HubSpot)에 좋은의 사람들은 당신이 jQuery를 선량을 많이 달성하기위한 순수 자바 스크립트 방법을 찾을 수있는 자원이 - 준비 포함

    허브 스팟 (HubSpot)에 좋은의 사람들은 당신이 jQuery를 선량을 많이 달성하기위한 순수 자바 스크립트 방법을 찾을 수있는 자원이 - 준비 포함

    http://youmightnotneedjquery.com/#ready

    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'); });

  6. 6.나는 확실히 당신이 요구하는지 모르겠지만, 아마도 이것이 캔 도움말 :

    나는 확실히 당신이 요구하는지 모르겠지만, 아마도 이것이 캔 도움말 :

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

}

    또는:

    window.onload = main;

function main(){
    // Code. . .

}

  7. 7.귀하의 방법 (닫는 body 태그 전에 스크립트를 삽입)

    귀하의 방법 (닫는 body 태그 전에 스크립트를 삽입)

    <script>
   myFunction()
</script>
</body>
</html>

    과거와 브라우저를 지원하는 신뢰할 수있는 방법입니다.

  8. 8.

    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 +를

  9. 9.여기 세정 업, 비 평가-사용하여 다양한 "모든 브라우저에서 작동"램 - swaroop의 버전을 - 모든 브라우저에서 작동!

    여기 세정 업, 비 평가-사용하여 다양한 "모든 브라우저에서 작동"램 - swaroop의 버전을 - 모든 브라우저에서 작동!

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

    그것은 그래서 여기 안 더 복잡한 방법입니다, 그러나, 실행하는 데 추가로 10 밀리 대기 않습니다 :

    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);

    DOM은 프레임 워크없이 준비가되어 있는지 확인하는 방법도 참조?

  10. 10.document.ondomcontentready = 함수 () {} 트릭을해야하지만, 전체 브라우저 호환성이 없습니다.

    document.ondomcontentready = 함수 () {} 트릭을해야하지만, 전체 브라우저 호환성이 없습니다.

    당신은 단지의 jQuery 분을 사용해야 같은데처럼

    11. from https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 AJAX 상호 도메인  (0) 2020.09.21
[JQUERY] JQuery와 - $가 정의되어 있지 않습니다  (0) 2020.09.21
[JQUERY] 어떻게 jQuery로 쿠키 설정 해제 / 설정합니까?  (0) 2020.09.21
[JQUERY] jQuery를 사용하여 중단 Ajax 요청  (0) 2020.09.21
[JQUERY] 요소의 jQuery 스크롤  (0) 2020.09.21
,

티스토리툴바