jQuery의 Ready()에 대한 순수한 js 대안
- 高洛峰원래의
- 2016-12-06 13:48:551373검색
ready 메소드는 DOM(Document Object Model, Document Object Model) 트리가 html 페이지에 완전히 로드된 후 트리거되는 jQuery에 의해 구현된 메소드입니다. 왜냐하면 수신된 메소드는 페이지의 모든 DOM이 실행될 때만 실행되기 때문입니다. 에 액세스할 수 있으므로 현재로서는 html의 요소에 완전히 액세스하고 조작할 수 있습니다.
jQuery 3.0 이전에는 일반적인 익명 함수 사용법은 다음과 같았습니다.
$(document).ready(function() {
// 在 .ready() 被触发时执行.
});
jQuery 3.0의 Ready() 변경 사항
jQuery 3.0 출시 이전에는 Ready 메소드를 사용하는 방법이 다음과 같았습니다.
On 문서 객체: $(document).ready(handler);
빈 요소: $().ready(handler);
또는 직접 사용됨(예: 지정된 요소가 아님) element ): $(handler);
위 메서드는 동일합니다. 들어오는 핸들러는 실행되는 지정된 요소에 관계없이 페이지의 모든 DOM이 로드된 후에 실행됩니다. 이미지 요소 $("img")에 대한 준비 메소드와 문서 객체는 이러한 요소가 로드된 후에 핸들러가 트리거된다는 것을 나타내지 않지만
전체 DOM 트리가 로드된 후에 트리거됩니다. jQuery 3.0에서는 $(handler); 메서드를 제외하고 다른 모든 항목이 더 이상 사용되지 않습니다.
이 선택은 .ready() 메서드의 동작과 관련이 없기 때문에 비효율적입니다.
Ready 이벤트와 Load 이벤트의 차이점
ready 이벤트는 페이지 DOM이 완전히 로드되고 요소가 로드될 수 있는 후에 트리거됩니다. 로드 이벤트는 페이지 DOM 및 리소스 파일(사진, 비디오 등)이 로드된 후에 트리거됩니다.
로드 이벤트는
$(window).on("load", function(){
// 当页面所有资源(图片,视频等)全加载完成后才加载执行
});
DOM이 로드되고 이미지가 로드될 때까지 기다립니다(이미지 크기에 따라 로드하는 데 일정 시간이 소요됩니다).
일반적인 DOM 작업의 경우 로드 이벤트가 필요하지 않을 수도 있지만 꼭 하고 싶다면 페이지의 모든 리소스가 로드되는 로딩 효과를 기다리거나 계산할 때 좋은 선택이 될 수 있습니다.
jQuery.ready()가 필요하지 않을 수도 있습니다
ready 이 메서드는 내부 코드가 DOM 요소를 올바르게 조작할 수 있음을 보장합니다. 이것은 무엇을 의미합니까? HTML 문서에 JavaScript 코드를 넣으면 페이지의 모든 요소가 로드될 때 콜백 함수의 코드가 브라우저에서 처리됩니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.ready() 教程</title>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
$(function(){ // .ready() 的回调方法, 在 DOM 完全加载完后执行
var length = $("p").length;
// 下面会在console控制台中输出 1, 表示有段落 p 存在.
// 这就证明了这个回调方法在 DOM 完全加载完后执行.
console.log(length);
});
</script>
</head>
<body>
<p>I'm the content of this website</p>
</body>
</html>
실행하려는 자바스크립트를 body 요소의 마지막 위치에 넣으면, 내부에 모든 요소가 들어있기 때문에 Ready() 메소드를 사용할 필요가 없습니다. JavaScript 코드가 실행될 때 페이지가 로드되었으므로 이때 요소에 액세스하거나 조작할 수 있습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.ready() 教程</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;
// 下面会在console控制台中输出 1, 表示有段落 p 存在.
console.log(length);
</script>
</body>
</html>
기본 JavaScript를 사용하여 교체 Ready()
최신 브라우저 및 IE9+의 경우 DOMContentLoaded 이벤트를 수신할 수 있습니다.
document.addEventListener("DOMContentLoaded", function(){
// 在 DOM 完全加载完后执行
});
여기서 콜백 메소드는 이벤트가 트리거되면 실행됩니다(이 이벤트 리스너는 페이지가 이벤트를 트리거한 후에 추가됩니다). 콜백 함수가 항상 실행될 수 있도록 하기 위해 jQuery는 문서의 ReadyState 속성을 감지합니다(참조). 속성 값이 완료되면 콜백 함수가 즉시 실행됩니다.
var callback = function(){
// 在 DOM 完全加载完后执行
};
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(){
// 检测 DOM 是否加载完全
if(document.readyState === "complete"){
// 为了确保在之后不会再触发 移除事件监听
document.detachEvent("onreadystatechange", arguments.callee);
// 实际处理程序...
}
});
또한 jQuery와 같은 로드 이벤트를 사용하면 모든 브라우저에서 올바르게 실행될 수 있습니다. 이로 인해 특정 시간 지연이 발생합니다. , 모든 리소스가 로드될 때까지 대기하기 때문입니다. 이 솔루션에서는 위에서 언급한 것처럼 이벤트가 트리거될 때 콜백 함수가 실행될 수 있는지 확인해야 한다는 점을 기억하세요. 🎜>