-
[JavaScript] 문서와 이미지 로딩, onload개발 프로세스/Front-end 2021. 6. 17. 14:35
onload
HTML 문서나 이미지의 로딩이 완료되는 시점에 호출되는 이벤트 리스너이다.
문서의 로딩 완료와 onload
웹 페이지의 출력(로딩)이 완료되면 window 객체에 load 이벤트가 발생한다. 주로 <body> 태그에 onload 리스너를 만든다.
<body onload="alert('이 사이트는 2017년 9월1일부터 www.js.co.kr로 옮겨지게 됩니다.')">이미지 로딩 완료와 onload
이미지를 출력하는 과정은 이미지 파일로부터 로딩하는 과정과 로딩된 이미지가 출력되는 두 과정으로 나뉜다. 이미지 로딩이 완료된 후에야 이미지를 사용할 수 있으므로 이미지 로딩을 지시하기 전에 onload 리스너를 먼저 등록한다.
<Image 객체의 프로퍼티>
src 이미지 주소 width 이미지가 출력될 폭 height 이미지가 출력될 높이 complete 이미지 로딩이 완료되었는지 여부. true/false /* Script */ function changeImage() { var sel = document.getElementById("sel"); var img = document.getElementById("myImg"); img.onload = function () { // 이미지 크기 출력 var mySpan = document.getElementById("mySpan"); mySpan.innerHTML = img.width + "x" + img.height; } var index= sel.selectedIndex; // 선택된 옵션 인덱스 img.src = sel.options[index].value; // <option>의 value 속성 // 이미지 로딩 시작, 완료 후 onload 리스너 호출 }<body onload="changeImage()"> <h3>onload로 이미지 크기 출력</h3> <hr> <form> <select id="sel" onchange="changeImage()"> <option value="media/apple.png">사과 <option value="media/banana.png">바나나 <option value="media/mango.png">망고 </select> <span id="mySpan">이미지 크기</span> </form> <p> <img id="myImg" src="media/apple.png" alt="."> </p> </body>new Image( )로 이미지 로딩과 출력
<img> 태그를 사용하지 않고 자바스크립트 코드로 Image 객체를 동적으로 생성하여 이미지를 로딩할 수 있다.
// 미리 로딩해둘 이미지 이름 배열 var files = ["media/Penguins.png", "media/Lighthouse.png", "media/Chrysanthemum.png", "media/Desert.png", "media/Hydrangeas.png", "media/Jellyfish.png", "media/Koala.png", "media/Tulips.png"]; var imgs = new Array(); for(var i=0; i<files.length; i++) { imgs[i] = new Image(); // 이미지 객체 생성 imgs[i].src = files[i]; // 이미지 미리 로딩 } // 다음 이미지 출력 var next = 1; function change(img) { img.src = imgs[next].src; // 이미지 변경 next++; // 다음 이미지 인덱스 next %= imgs.length; // 개수를 넘으면 처음으로 }<img style="border:20px ridge wheat" src="media/Penguins.png" alt="." width="200" height="200" onclick="change(this)"><참고 교재>
명품 웹 프로그래밍
브라우저를 닫더라도 로그인이 계속 유지될 수 있습니다. 로그인 유지 기능을 사용할 경우 다음 접속부터는 로그인할 필요가 없습니다. 단, 게임방, 학교 등 공공장소에서 이용 시 개인정보가
webprogramming.co.kr
'개발 프로세스 > Front-end' 카테고리의 다른 글
[JavaScript] 폼과 이벤트 활용 : 라디오버튼과 체크박스 (0) 2021.06.17 [JavaScript] 폼과 이벤트 활용 : onfocus와 onblur (0) 2021.06.17 [JavaScript] 마우스 핸들링 (0) 2021.06.17 [JavaScript] 이벤트 리스너 만들기 (0) 2021.06.17 [JavaScript] HTML 문서의 동적 구성 (0) 2021.06.16