자바스크립트 로드 이벤트 javascript onLoad Event

자바스크립트의 로드 onload 이벤트는 웹페이지가 웹브라우저에서 화면이 나타나면 동작한다. 컨텐츠가 많다면 비동기적으로 독립적으로 불러올 수 있고, 효과를 주고 싶다면 글자크기나 이미지를 변경할 수 있다. 웹페이지 사용에 사용자의 환경이 부족하다면 알림이나 공지를 나타낼 수 있다. 이런 기능 등을 하는 것이 onload 이벤트이다.

자바스크립트 로드 이벤트
javascript onLoad Event

웹페이지가 화면에 뜰 때 별도의 작업이 필요한 경우들이 있다.

로딩시간이 길어지는 컨텐츠 부분들을 비동기로 데이터로 가져오거나 혹은 쿠키 검사를 하거나 혹은 사용자를 위한 검사작업등이 그것이다.

로드 onLoad 이벤트는 그런 것들을 수행한다.

웹페이지는 느리면 사람들은 바로 뒤로가기 버튼을 클릭한다.

그렇기에 빨리 나타낼 수 있는 것은 빨리 나타나게 하는 것이 좋다.

로딩완료시 동작 onload 이벤트

화면 로드이벤트는 웹페이지가 화면에 전부 나타나면 동작한다.

html 같은 텍스트부터 이미지나 소리같은 리소스 등이 화면에 다 로드되었을 때를 로드되었다고 한다.

자바스크립트는 웹브라우저에서 동작하는 클라이언트 사이드 언어이다.

그렇기에 문서 내용과 리소스가 웹브라우저를 통해 사용자 컴퓨터에 다운로드 되면 load 이벤트가 동작하게 된다.

사용방법

화면 로드이벤트는 onload 이벤트라 한다.

사용법은 웹페이지의 태그에 onload="메서드명" 으로 기입하면 된다.

보통 화면이 로드되는 시점이기 때문에 body 태그와 많이 사용된다.

특별히 다른 태그와도 같이 사용되기는 하지만, 특별한 경우를 제외하고는 body 태그와 사용하는 것이 편하다.

<body onload="메서드명">

<script>
	function 메서드명() { ... }
</script>

샘플코드

실제로 한번 작성해 보도록 한다.

html 문서에 이미지까지 넣은 후 onload 이벤트를 적용하여 메서드를 호출하도록 한다.

글자와 이미지를 하나씩 넣었다.

페이지가 로드되면서 onload 이벤트를 호출하면 글자와 이미지의 원본크기를 화면에 표시한다.

글자와 이미지의 크기가 변경되면, 변경된 크기를 화면에 표시한다.

중요한 것은 onload() 이벤트가 호출될 때 자바스크립트가 호출된다는 점이다.

<!DOCTYPE html>
<html>
    <body onload="fnEvtLoadPage();">

        <h1>자바스크립트 이벤트</h1>

        <p>
            <span id="orginTxtInfo">
            <span/>
        </p>
        <p>
            <span id="chginTxtInfo">
            <span/>
        </p>
        <p>
            <span id="txt">
                가나다라마바사아자차카타파하
                ABCDEFGHIJKLMNOPQRSTUVWXYZ
            <span/>
        </p>
        <p> 
            <span id="orginImgInfo">
            <span/>
        </p>
        <p> 
            <span id="chginImgInfo">
            <span/>
        </p>
        <p>
            <img id="img" src="testimage.gif" />
        </p>

        <script>

            function fnEvtLoadPage(ptag){ 

                fnGetOriginalInfo();
                fnSetInfo();
            }

            function fnSetInfo() {

                document.getElementById("txt").style.fontSize = "36px";
                document.getElementById("img").style.width = '200px';
                document.getElementById("img").style.height = '200px';

                var originTxtInfo = window.getComputedStyle(document.getElementById("txt")).fontSize;
                document.getElementById("chginTxtInfo").innerText = "변경글자크기 : " + originTxtInfo;

                var originImgWidth = document.getElementById("img").clientWidth;
                var originImgHeight = document.getElementById("img").clientHeight;
                document.getElementById("chginImgInfo").innerText = "변경이미지크기 : " + originImgWidth + " X "  + originImgHeight;
            }

            function fnGetOriginalInfo() {

                var originTxtInfo = window.getComputedStyle(document.getElementById("txt")).fontSize;
                document.getElementById("orginTxtInfo").innerText = "원본글자크기 : " + originTxtInfo;

                var originImgWidth = document.getElementById("img").clientWidth;
                var originImgHeight = document.getElementById("img").clientHeight;
                document.getElementById("orginImgInfo").innerText = "원본이미지크기 : " + originImgWidth + " X "  + originImgHeight;
            }

        </script>
        
    </body>
</html>

결과화면을 보자.

텍스트의 원본크기는 16px 이다.

이미지의 원본크기는 391px X 396px 이다.

onload 이벤트가 실행된후 자바스크립트 함수를 호출하면서 크기가 변경된 것을 볼 수 있다.

'programming > javascript' 카테고리의 다른 글

자바스크립트 문자열 길이 문자 반복문 출력 javascript string length (0)	2021.11.03
자바스크립트 문자열 선언과 사용하기 javascript string (0)	2021.11.02
자바스크립트 키다운 이벤트 javascript onkeydown event (0)	2021.11.01
자바스크립트 마우스아웃 이벤트 사용 javascript onmouseout event (0)	2021.11.01
자바스크립트 마우스오버 이벤트 사용 javascript onmouseover event (0)	2021.10.30

자바스크립트 로드 이벤트 javascript onLoad Event