- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
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(){
//실행될 코드
}
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() 첫 번째 |
[출처] https://bogyum-uncle.tistory.com/206
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
