$ (window) .load와 $ (document) .ready의 차이점은 무엇입니까?
내 자바 스크립트 코드와 함께 최근에 문제가 내 밖으로 내 코드의 일부를 복용 한 $(document).ready()및 내 퍼팅 $(window).load()고정 문제.
이제 나는 그것이 window.load바로 직후에 해고 된다는 것을 이해합니다 document.ready. 그러나 그것은 왜 이후 document.ready에 준비가되지 않았 window.load()습니까?
load이미지를 포함한 모든 자산의로드가 완료되면 호출됩니다. readyDOM이 상호 작용할 준비가되면 시작됩니다.
MDC에서 window.onload :
로드 이벤트는 문서로드 프로세스가 끝날 때 발생합니다. 이 시점에서 문서의 모든 객체는 DOM에 있으며 모든 이미지와 하위 프레임이로드를 완료했습니다.
jQuery API 문서에서 .ready (handler) :
JavaScript는 페이지가 렌더링 될 때 코드를 실행하기위한로드 이벤트를 제공하지만이 이벤트는 이미지와 같은 모든 자산이 완전히 수신 될 때까지 트리거되지 않습니다. 대부분의 경우 스크립트는 DOM 계층 구조가 완전히 구성되는 즉시 실행할 수 있습니다. .ready ()에 전달 된 핸들러는 DOM이 준비된 후에 실행되도록 보장되므로 일반적으로 다른 모든 이벤트 핸들러를 연결하고 다른 jQuery 코드를 실행하기에 가장 좋은 곳입니다. CSS 스타일 속성의 값에 의존하는 스크립트를 사용하는 경우 스크립트를 참조하기 전에 외부 스타일 시트를 참조하거나 스타일 요소를 포함하는 것이 중요합니다.
$(document).ready() 페이지의 DOM을 조작 할 준비가되었음을 의미합니다.
window.load() 전체 페이지 (CSS 및 이미지 파일과 같은 구성 요소 포함)가 완전히로드되면 트리거됩니다.
당신은 무엇을 성취하려고합니까?
$(document).ready(function(){
//code here
});
위의 코드는 jQuery.
이 코드는 jQueryDOM이 준비된 후 코드 를 초기화하려고 할 때 사용됩니다 .
$(window).load()
때로는 그림을 조작하고 싶을 때가 있습니다. 예를 들어 그림을 수직 및 수평으로 정렬하려면 그림의 너비와 높이를 가져와야합니다. 함께 $(document).ready()방문자가 당신이 초기화해야하는 경우 이미지 이미로드가없는 경우 당신은 그렇게 할 수 없습니다 jquery이미지로드가 완료 될 때 정렬 기능을. 그것이 우리가 사용하는 곳입니다$(window).load()
$(document).ready입니다 jQueryDOM이로드 될 때 문서 구조가 준비되면이 발사 그래서, 해고 이벤트입니다.
$(window).load 이벤트는 전체 콘텐츠 (css, 이미지 등 포함)가로드 된 후 시작됩니다.
이것은 큰 차이점입니다.
$(document).ready() DOM을 <body>...</body>
$(window).load() 모든 DOM을 문서로 감싸는 아빠입니다. <html>...</html>
귀하의 경우에 사용하여 렌더링 처리를 저장하십시오.
간단히 말해서 window.load윈도우의 모든 내용이로드 document.ready될 때 호출 되는 반면 DOM이로드되고 문서 구조가 준비되었을 때 호출됩니다.
로드 상태는 창 개체가 생성되고 DOM을 포함하여 필요한 모든 구성 요소가 메모리에로드되었지만 페이지에서 동일한 렌더링을 위해 렌더링 엔진에 전달되지 않은 상태입니다.
반면에 준비 상태는 DOM 요소, 이벤트 및 기타 종속 구성 요소가 렌더링 엔진으로 전달되고 페이지에서 렌더링되며 상호 작용 및 조작 할 준비가되었는지 확인합니다.
$ (document) .ready는 $ (window) .load 이벤트에 비해 슬라이더가 빠릅니다.
$ (document) .ready는 Dom이로드되면 실행되지만 $ (window) .load 이벤트는 Dom, css 및 이미지가 완전히로드되면 실행됩니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-1.12.4.js" ></script>
<script>
$(window).load(function () {
var img = $('#img1');
alert( "Image Height = " + img.height() + "<br>Image Width = " + img.width());
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="img1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTozkxoNSH8739juRXJJX5JxREAB6I30bFyexPoCdRVa2fKfH2d" />
</div>
</form>
</body>
</html>$(document).ready is a jQuery event. It fires as soon as the DOM is loaded and ready to be manipulated by script. This is the earliest point in the page load process where the script can safely access elements in the page's html DOM. This event is fired before all the images, css etc. are fully loaded.
window.load() is triggered when the whole page (incl. components like CSS and image files) has been completely loaded.
'programing' 카테고리의 다른 글
| 자바 : 제한된 와일드 카드 또는 제한된 유형 매개 변수? (0) | 2020.11.11 |
|---|---|
| 테이블 행 채우기 (0) | 2020.11.11 |
| 부호있는 정수와 부호없는 정수의 차이점은 무엇입니까? (0) | 2020.11.11 |
| 우선 순위 반전이란 무엇입니까? (0) | 2020.11.10 |
| Jquery에서 show () 및 hide ()와 함께 delay ()를 어떻게 사용할 수 있습니까? (0) | 2020.11.10 |