JavaScript [Javascript] onload, ready

2024.08.13 19:15

[Javascript] onload, ready

1. onload VS ready

1.1. onload

1.1.1 onload (JavaScript)

문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트

- DOM의 standard 이벤트로, html의 로딩이 끝난 후에 시작. 화면에 필요한 모든 요소들이 웹 브라우저 메모리에 모두 올려진 다음 실행되며 화면이 그려진 다음 메시징이나 이미지가 관련 요소가 모두 올려진 다음의 애니메이션에 적합

- 외부 링크나 파일 include시 그 안에 window.load 스크립트가 있으면 둘 중 하나만 적용

window.onload = function(){
	//실행될 코드
}

- 문서에 포함된 모든 콘텐츠가 로드된 후에 실행되기에 불필요한 로딩시간이 추가될 수 있음

- 전체 페이지의 외부 리소스 이미지 브라우저에 불려온 이후 작동하게 되며 이미지가 안 뜨거나 딜레이가 생길 시

그 만큼의 시간을 기다려야 함

- 동일한 문서에 오직 onload는 하나만 존재해야 함.

- 중복될 경우, 마지막 선언이 실행되며, 외부 라이브러리에서 이미 선언된 경우 이를 찾아 하나로 합치는 과정이 필요

- html <body> 요소에 속성(attribute)으로 지정될 수 있음

<body onload=“실행될 코드”>

위와 같이 사용될 경우, window.onload로 지정된 것은 무시됨

- window.load()는 jQuery CDN을 import 해줘야 사용할 수 있는 반면, body onload 이벤트는 jQuery CDN을 import 해주지 않아도 사용할 수 있음

- window 객체 뿐 아니라 원하는 객체가 로드되었을 때 실행될 코드를 설정할 수 있음

document.getElementById(“myFrame”).onload = function(){
	//실행될 코드
}

아니면, 이벤트를 직접 연결할 수도 있음.

window.addEventListener(‘load’, function(){
	//실행될 코드
});

1.1.2. onload (jQuery)

jQuery에서는 onload와 같은 동작을 하는 load 메소드를 제공

$(window).load(function(){
	//실행될 코드
})

1.1.3. DOMContentLoaded

HTML과 JavaScript가 로드된 시점에서 발생하는 이벤트

window.addEventListener(‘DOMContentLoaded’, function(){
	//실행될 코드
}

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

onload 이벤트보다 먼저 발생. 빠른 실행속도가 필요할 때 적합

1.1.4. jQuery ready

JavaScript의 DOM 트리가 준비되었을 때의 시점을 컨트롤하는 메소드

$(document).ready(function(){
	//실행될 코드
});

jQuery ready를 사용하는 이유는 window.onload 같은 경우에 전체 페이지의 모든 외부 리소스와 이미지가 브라우저에 불려와진 이후에 작동하게 되어 이미지가 안뜨거나 딜레이가 발생할 경우 대기해야함.

또한, 외부 링크나 파일을 include할 때, 그 안에 window.load() 스크립트가 또 존재하면 둘 중에만 적용되는 사태가 발생

그리고 body onload와 같이 사용되면 window.onload는 실행되지 않기 때문에 이런 문제를 해결하기 위해서 jQuery에서 $(document).ready() 함수를 제공.

이 함수의 경우 외부 라이브러리 및 이미지와는 상관없이 DOM 데이터 로드시 바로 실행이 가능하여 window.onload()보다 더 빨리 실행 됨

또한 여러 번 사용되면 선언 순서에 따라 순차적으로 실행

onload의 활용이 가장 많은 것은 사이트의 웹 페이지들이 로딩 될 때 공통적으로 적용하는 스크립트를 작성할 때.

필요한 내용을 함수로 만들어 js 파일에 저장해두고, 각 웹페이지들에 이런 내용을 적어두는 것

예를 들면,

//common.js

function init(){
	alert(“Hello”);
}


// otherPage.js

<script src = “common.js”> </script>
<body onload=“init();”>

1.2. ready

document는 window의 자식 객체로 html의 요소들이나 속성들에 접근할 시 사용하는 객체

1.2.1. ready와 load 실행 순서

document.ready()가 먼저 실행되고, 그 다음에 window.load()가 실행

1.2.1.1. 실행순서 예시

<script>
	$(window).load(function() {
	    console.log("console> window.onloade() 첫번째");
	});
	$(window).load(function() {
	    console.log("console> window.onload() 두번째");
	});
	$(document).ready(function() {
	    console.log("console> document.ready() 첫번째");
	});
	$(document).ready(function() {
	    console.log("console> document.ready() 두번째");
	});
</script>

1.2.1.2. 출력

document.ready() 첫 번째
document.ready() 두 번째
window.load() 첫 번째
window.load() 두 번째

[출처] https://bogyum-uncle.tistory.com/206

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.

img.png [File Size:15.2KB/Download:13]

이 게시물을

번호	제목	글쓴이	날짜	조회 수
13	[Next.js 개발] pm2 로 Next.js 실행하기	졸리운_곰	2025.07.01	480
12	[Next.js 개발] NextAuth.js 를 이용한 자체 로그인 구현	졸리운_곰	2024.03.09	559
11	[Next.js 개발] Using Next.js Version 13	졸리운_곰	2024.03.09	409
10	[Next.js 개발] Common Errors in Next.js and How to Resolve Them	졸리운_곰	2024.03.09	468
9	[Next.js 개발] [Javascript] 현재 날짜, 시간 구하기	졸리운_곰	2024.03.09	429
8	[Next.js 개발] Using Next.js Version 13 : Next.js 버전 13 사용	졸리운_곰	2024.03.07	499
7	[Next.js 개발] [React] useEffect에서 async/await	졸리운_곰	2024.03.06	362
6	[next.js 개발] How to use fetch API in Next.js?	졸리운_곰	2024.03.05	366
5	[next.js 개발] Next.js14에 Mysql연결하기	졸리운_곰	2024.03.05	457
4	[next.js 개발] How To Connect MySQL And Auth To A Next.js App	졸리운_곰	2024.03.05	323
3	[next.js 개발] Next.js 소개와 14 버전 변경사항 – React 인기 라이브러리	졸리운_곰	2024.03.05	523
2	[next.js 개발] next.js API 호출시 - 수신부따로 호출하고 await 붙일것	졸리운_곰	2024.03.05	555
1	[next.js 개발] [Next.js] Fetch POST body에 json 형태로 데이터 주고받기 (json형 / object형 차이)	졸리운_곰	2024.03.05	455

첫 페이지 1 끝 페이지

쓰기

태그