기본 JS 대신 jQuery의 Read() 메서드에 대한 자세한 설명
- 高洛峰원래의
- 2016-12-07 14:00:17953검색
jQuery 3.0 이전에는 다음과 같은 익명 함수를 사용하는 것이 일반적으로 사용되었습니다.
$(document).ready(function() {
// Handler for .ready() called.
});
jQuery 3.0 Ready() 변경 사항
jQuery 3.0 출시 이전에는 다음과 같은 Ready 메소드라는 메소드가 있었습니다.
문서 요소에 대한 작업: $(document).ready(handler);
빈 요소에 대한 작업: $().ready(handler);
또는 직접 작업(즉, 특정 요소에 대한 작업이 아님): $(handler);
위의 모든 항목 명명됨 변형은 기능적으로 동일합니다. 어떤 요소이든지 DOM이 로드된 후에 지정된 핸들러가 호출됩니다. 즉, 여기서 DOM 로딩이 완료되었다고 해서 img 요소와 같은 문서의 특정 요소가 로드되었다는 의미는 아닙니다. 반대로 여기서 의미하는 것은 전체 DOM 트리가 로드되었다는 것입니다.
jQuery 3.0에서는 $(handler)를 제외한 모든 준비된 메소드가 더 이상 사용되지 않습니다.
공식 성명:
이는 선택기가 Ready()에 연결되어 있지 않기 때문입니다. 이는 비효율적일 뿐만 아니라 브라우저 엔진이 이 메서드의 동작에 대해 잘못된 가정을 하게 만듭니다. .
ready 이벤트와 load 이벤트의 차이점
ready 이벤트는 DOM이 로드되고 해당 요소에 안전하게 접근할 수 있을 때 발생합니다. 반면에 로드 이벤트는 DOM과 모든 리소스가 로드된 후에 트리거됩니다.
다음과 같이 로드 이벤트를 사용할 수 있습니다.
$(window).on("load", function(){
// Handler when all assets (including images) are loaded
});
이 경우 DOM이 나올 때까지 기다려야 할 뿐만 아니라 구조에 완전히 액세스할 수 있지만 함수가 실행되기 전에 모든 이미지 리소스가 완전히 로드될 때까지 기다려야 합니다(로딩 시간은 이미지 파일 크기에 따라 다름).
일반적인 DOM 작업에는 로드 이벤트가 필요하지 않을 수 있지만, 예를 들어 모든 리소스가 로드되기 전에 회전 로더 스타일을 표시하려는 경우 또는 JS를 사용하여 이미지 크기를 계산하려는 경우 좋은 선택이 될 수도 있습니다.
jQuery.ready()가 필요하지 않을 수도 있습니다
Ready 메소드는 모든 DOM 요소를 안전하게 조작할 수 있는 경우에만 코드가 실행되도록 보장합니다. 그런데 이것이 무엇을 의미하는가? 이는 실행하려는 js 코드가 HTML의 특정 조각에 포함된 경우 실행되기 전에 브라우저가 다음 요소도 로드해야 함을 의미합니다.
다음 예와 같습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.ready() tutorial</title>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
$(function(){ // .ready() callback, is only executed when the DOM is fully loaded
var length = $("p").length;
// The following will log 1 to the console, as the paragraph exists.
// This is the evidence that this method is only called when the
// DOM is fully loaded
console.log(length);
});
</script>
</head>
<body>
<p>I'm the content of this website</p>
</body>
</html>
실행하려는 자바스크립트 코드를 body의 마지막에 넣으면, 브라우저가 자바스크립트를 구문 분석할 때 조작하고 액세스하려고 하는 DOM 요소가 이미 로드되어 있으므로 Ready() 메서드를 사용해야 합니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.ready() tutorial</title>
</head>
<body>
<p>I'm the content of this website</p>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
var length = $("p").length;
// The following will log 1 to the console, as the paragraph exists.
console.log(length);
</script>
</body>
</html>
기본 JavaScript Ready()는
을 대체합니다. 최신 브라우저와 IE9+의 경우 DOMContentLoaded 이벤트를 수신하여 Ready()와 동일한 기능을 얻을 수 있습니다.
document.addEventListener("DOMContentLoaded", function(){
// Handler when the DOM is fully loaded
});
단, 이벤트가 이미 발생된 경우에는 콜백이 실행되지 않으니 주의하시기 바랍니다. 콜백이 항상 실행되도록 하기 위해 jQuery는 문서 참조의 "readyState" 속성을 확인하고, 속성 값이 완료로 변경되면 콜백 함수가 즉시 실행됩니다.
var callback = function(){
// Handler when the DOM is fully loaded
};
if (
document.readyState === "complete" ||
(document.readyState !== "loading" && !document.documentElement.doScroll)
) {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
이 솔루션을 이미 구현하고 있는 domReady 라이브러리를 포함합니다.
IE 브라우저 이전 버전
IE8 이하 브라우저의 경우 onreadystatechange 이벤트를 사용하여 문서의 ReadyState 속성을 모니터링할 수 있습니다.
document.attachEvent("onreadystatechange", function(){
// check if the DOM is fully loaded
if(document.readyState === "complete"){
// remove the listener, to make sure it isn't fired in future
document.detachEvent("onreadystatechange", arguments.callee);
// The actual handler...
}
});
또는 jQuery와 같은 Load 이벤트를 사용할 수도 있습니다. 이는 모든 브라우저에서 작동합니다. 또한 모든 자산이 로드될 때까지 기다리기 때문에 지연이 발생합니다.
이 솔루션에서는 위에서 언급한 대로 ReadyState도 확인하여 콜백이 항상 실행될 수 있는지 확인하세요.