본문 바로가기

프론트/javascript

페이지 로드 후 불러오는 함수 onload, ready, DOMContentLoaded

전자정부 프레임워크에서 수정 기능을 만들다가,

콤보박스에 전에 선택했던 코드를 불러와서 그 선택항목이 보이도록 하기위해 자바스크립트를 사용하기로 했다.

내가 아는건 $(document).ready인데 이건 제이쿼리가 필요하고, 이거 하나때문에 제이쿼리 cvn을 다운받는 건 비효율적이다.

그래서 찾아본 페이지 로드 후 불러오는 함수 세가지

1.window.onload = function(){}

=> 가장 많이 쓰이지만, 페이지에 이미지, 영상이 포함 되있을 경우 로딩속도가 매우 느리다는 단점이 있다

2. $( document ).ready(function() {});

=> 1의 단점을 보완하나 제이쿼리가 필요함. 

3.document.addEventListener("DOMContentLoaded", function () {});

=> ie8이하에서는 지원하지 않기 때문에 기존에는 잘 쓰이지 않았으나, 요즘은 ie8의 점유율이 매우 낮기 때문에 많이 사용

				<td>
						<select name="gid" id="gid">
							<option value="1">Job(업무)</option>
							<option value="2">Hobby(취미)</option>
						</select>
				</td>
                
        document.addEventListener("DOMContentLoaded", function () {
			var gid = "${codeVO.gid}"; // codeVO의 gid 값을 JavaScript 변수에 할당
			document.getElementById("gid").value = gid; // 해당 값에 해당하는 옵션을 선택
		});

그래서 3번함수를 이용해서 기존 gid를 불러와 콤보박스를 선택할 수 있게 하였다.