고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문 제목
window load / document ready , 페이지의 모든 요소가 로딩된 후에 특정 javascript 실행하기 (이미지로딩/동영상로딩/페이지로딩 등등)
본문
반응형
웹사이트를 개발할때, 이미지로딩/ 동영상로딩 등이 완료된 이후에 특정 함수를 실행해야 하는 경우가 있습니다. 이때, 사용할 수 있는 이벤트가 document.ready / window.load 가 있는데요, 두개는 비슷한 동작을 하지만, 엄격히 다른 기준에 따라 실행이 됩니다.
document.ready
먼저, document.ready 는 페이지내의 모든 DOM 요소들이 로딩되었을때 실행이 됩니다. 즉, 페이지 내에 img 태그가 있을경우, img 태그 객체가 로딩되면 document.ready 가 실행된다는 겁니다.
<img src = "verybigsizeImage.jpg">
위와같이 아주 큰 사이즈의 이미지를 img 태그에 명기한 후에 페이지를 로딩하면, verybigsizeImage.jpg 가 로딩되지 않아도 document.ready 함수는 실행되게 됩니다. verybigsizeImage.jpg 파일이 외부리소스인지 내부리소스인지 상관없으며, 만약, 이미지로딩이 끝난후에 해당 이미지를 대상으로 하는 함수를 실행해야 한다면, 이미지 로드가 완료되기 전에 해당 함수가 실행되는 경우도 발생하게 됩니다.
video 태그는 보통 크기가 아주 큰 경우가 많은데요, 외부서버에 있던 내부에 있던 document.ready 를 사용하게되면 페이지는 표시되지만 동영상은 로딩이 진행중일 수 있습니다
window.onload
반면 window.ready 는 DOM 엘리먼트 뿐 아니라, 페이지내에 기록된 모든 리소스(내부/외부 무관) 즉, 모든 이미지와 jQuery 같은 CDN, 동영상 등의 로딩이 완료되었을 때만 window.onload가 실행되게 됩니다.
아래와 같은 코드를 통해 document.ready 와 window.onload 의 실행순서를 확인해 볼 수 있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!doctype html>
<html lang=ko>
<head><title></title></head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<body>
<video>
<source data-res="1024" id="sVideo01" src="./deepsleep.mp4" type='video/mp4'>
</video>
<img src = "verybigsizeImage.jpg">
<script language = "javascript">
$(document).ready(function(){
console.log("document ready ");
});
window.onload=function(){
console.log("window onload ");
}
</script>
</body>
</html>
|
cs |
위의 코드를 개발자모드에서 실행시켜보면 콘솔창에 다음과 같이 나타나는 걸 볼 수 있습니다
document ready 가 먼저 실행된 후에 window onload가 실행되는 걸 확인할 수 있습니다
또한, 두 이벤트에 break point 를 설정한 후에 실행시켜 보면, 역시나 document.ready 에서 먼저 멈추는 것을 확인할 수 있습니다.
반응형
댓글 영역