728x90
[자바스크립트] script 태그 안에 defer란?
DOM 요소의 로드가 끝나고 난 후
해당 스크립트를 실행하라는 속성이다
유사한 기능을 수행하는 것으로는
윈도우 로드 이벤트가 있는데
window.addEventListener('load',e=>{});
해당 이벤트는 DOM 요소 뿐 아니라
모든 요소의 로드 이후에 실행을 하라는 이벤트인 점에서
defer와 차이가 있다
기본 형태
<!-- 기본 형태 -->
<script src="example.js" defer></script>
샘플 예제
[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window load example</title>
<script src="example.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load',e=>{
console.log(`window > load 이벤트 실행!`);
});
</script>
</body>
</html>[example.js]
console.log(`example.js 실행~!`);
출력 결과 (콘솔)
example.js 실행~!
index.html:13 window > load 이벤트 실행!
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 마우스 이벤트 mouse event (0) | 2021.05.21 |
|---|---|
| [Javascript] 브라우저 윈도우 창 종료 이벤트 beforeunload / unload (0) | 2021.05.21 |
| [FrontEnd / Javascript] 스크롤 이동 ScrollBy ScrollTo (0) | 2021.05.21 |
| [프론트 엔드 / 자바스크립트] 좌표 값 구하기 (e.pageX / Y , e.clientX / Y ) (0) | 2021.05.21 |
| [프론트엔드 / 자바스크립트] 브라우저 엘리먼트 좌표 값 구하기 elem.getBoundingClientRect() (0) | 2021.05.20 |
댓글