1. 문서의 로딩 완료와 onload
: 웹 페이지의 출력(로딩)이 완료되면 window 객체에 load 이벤트가 발생
window.onload = "alert('onload')";
<body onload = "alert('onload')">
<예시>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 문서의 onload</title>
</head>
<body onload="alert('이 사이트는 2017년 9월 1일부터 \ www.js.co.kr로 옮겨지게 됩니다.')">
<h3>HTML 문서의 로딩 완료, onload</h3>
<hr>
이 페이지는 onload 리스너의 사용 예를 보여줍니다.
이 페이지가 출력되고 난 바로 직후 onload 리스너를 통해 경고창을 출력합니다.
</body>
</html>
2. 이미지 로딩 완료와 onload
: 이미지가 출력되는 과정은 이미지 파일로부터 로딩하는 과정과 로딩된 이미지가 출력되는 과정으로 나뉨
: 이미지 로딩이 완료된 후에야 이미지 사용 가능 → 이미지 사용 전 onload 리스너를 먼저 등록
var myImg = document.getElementById("myImg");
myImg.onload = function() { //이미지 로딩 완료 시 실행되는 함수
var.width = myImg.width; //이미지가 로딩된 후 정확한 이미지 폭 알 수 있음
}
myImg.src = "banana.png"; //이미지를 로딩하여 출력하도록 지시
<예시>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onload로 이미지 크기 알아내기</title>
<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; //<span> 태그 내에 이미지의 크기 출력
}
var index = sel.selectedIndex; //선택된 옵션 인덱스
img.src = sel.options[index].value; //선택된 인덱스에 해당하는 옵션의 value값 즉, 각 옵션의 src(이미지 파일)를 img.src에 저장
//이미지 로딩 시작, 완료 후 onload 리스너 호출
}
</script>
</head>
<body onload="changeImage()"> <!-- 로딩 후 함수 호출 -->
<h3>onload로 이미지 크기 출력</h3>
<hr>
<form>
<select id="sel" onchange="changeImage()">
<option value="media/apple.png">사과</option> <!-- index = 0 -->
<option value="media/banana.png">바나나</option> <!-- index = 1 -->
<option value="media/mango.png">망고</option> <!-- index = 2 -->
</select>
<span id="mySpan">이미지 크기</span>
</form>
<p><img id="myImg" src="media/apple.png" alt="."></p>
</body>
</html>
3. new Image()로 이미지 로딩과 출력
: <img> 태그를 사용하지 않고 자바스크립트 코드로 Image 객체를 생성하여 이미지 로딩 가능
<예시>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>new Image()로 이미지 로딩</title>
<script>
//8개의 이미지 파일 이름 배열
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]; //배열의 각 값의 src는 files 배열에서 불러옴
}
var next = 1; //초기 index = 0부터 시작하여 그 다음은 1
function change(img) { //다음 이미지를 출력하는 함수 생성
img.src = imgs[next].src; //index를 1씩 늘려가며 이미지 src 변경
next++; //index 1씩 증가
next %= imgs.length; //개수를 넘으면 처음으로
}
</script>
</head>
<body>
<h3>new Image()로 이미지 로딩</h3>
<hr>
이미지를 클릭하면 다음 이미지를 보여줍니다.<p>
<img style="border:20px ridge wheat" src="media/Penguins.png" alt="." width="200" height="200" onclick="change(this)">
</body>
</html>
'JavaScript > 4. 이벤트 기초 및 활용' 카테고리의 다른 글
| Day 48 : 폼과 이벤트 활용 (0) | 2021.12.23 |
|---|---|
| Day 47 : Script (0) | 2021.12.22 |
| Day 47 : 마우스 핸들링 (0) | 2021.12.22 |
| Day 47 : 이벤트 흐름 (0) | 2021.12.22 |
| Day 47 : 이벤트 객체 (0) | 2021.12.22 |