안녕하세요 저자님.
열심히 공부하다가 또 왔습니다.
p.414 하단부분에서
var bananaImg = new Image();
bananaImge.src = "banana.png";
myImg.src = bananaImg.src; 이 부분 질문드립니다.
Q. 이미지태그의 DOM객체 src에 이미지객체 src를 주는것이 이해가 안됩니다.
그러니까, 이미지객체를 미리 만들고 DOM트리에서 기존 이미지태그DOM객체를 찾아서
8장 DOM트리에 객체 삽입과 삭제를 하는것이라면 이해가 갈텐데요..
객체를 바꾸는것이 아니라
단순히 객체의 src프로퍼티값만 바꾼다면, 이미지객체를 왜 미리 만드는지 모르겠습니다.
그리고
myImg.src = bananaImg.src;
myImg.src = "banana.png";
이 두문장은 같은거 아닌가요?
이미지객체를 생성하는 목적은 책과 답변을 통해 이해했습니다. 그런데,
"myImg.src = bananaImg.src; 는 bananaImg 객체에 적재된 이미지를 myImg 객체로 복사하는 것입니다. "<<이 부분이 이해가 가질 않습니다.
제가 궁금한것은
src프로퍼티는 이미지 주소를 가지고있는데, 단순 주소를 전달하는것이 어떻게 객체에 적재된 이미지가 복사가 되는것인지 모르겠습니다.
답변주신 내용을 여러차례 읽어보며 추측을 해보았는데요.
bananaImg.src = "banana.png"; >> 이미지주소로 요청하여 웹서버에서 파일을 받고나면, src프로퍼티는 객체내부(이미지버퍼)의 주소를 가리키게되고
myImg.src = bananaImg.src; >> 내부객체 이미지 주소를 전달함으로써 DOM객체 이미지를 바꿔치기가 되는것이라고 추측해봤습니다.
bananaImg.src = "banana.png" 나
myImg.src = bananaImg.src;
의 처리에 대해 집중해보죠. 지금부터 설명하는 것은 어디까지나 추측입니다.
이 문장 형식을 그대로 보면, 독자가 질문한 것처럼 myImg 객체의 src에 문자열 형식으로 파일 경로명, "banana.ong"가 저장되는 것이죠.
하지만, myImg 객체의 src에 이미지의 URL이 지정되면 그 이미지를 화면에 출력하는것으로 그 시맨틱(의미)가 정해져 있는 것입니다.
이 시맨틱 대로 작동하도록 자바스크립트 엔진이 구현되어 있습니다. 구현은 자바스크립트 엔진마다 다를 수 있습니다.
하지만, 예상할 수 있는 구현 시나리오는 다음과 같습니다.
bananaImg.src = "banana.png"
문을 처리할 때, "banana.png"를 로딩시키는 작업을 먼저하고
이미지 이름 "banana.png"와 로딩된 이미지 버퍼의 주소를 내부에 기억(해시테이블이나 해시맵을 사용하여)합니다.
또한 bananaImg 객체의 src 프로퍼티에 문자열로 "banana.png"를 저장해둡니다.
이제, myImg.src = bananaImg.src; 를 처리하면, myImg.src의 값이 문자열 "banana.png"가 되고,
시맨틱으로 정해진 것처럼, myImg DOM 객체의 이미지를 화면에 출력하기 위해,
해시테이블에서 src 프로퍼티에 저장된 이미지 이름("banana.png")으로 이미지 버퍼를 찾고 이미지 버퍼에 저장된 이미지를화면에 출력할 것 같습니다.
그런데 만일 myImg.src의 값이 ""이거나 null 이면 해시테이블에서 이미지 이름을 찾을 수 없기 때문에, 오류가 나겠지요.
뭐 이런 식으로 작동할것 같습니다.
하지만, 구체적으로 자바스크립트 엔진의 코드를 분석해보기 전에는 어떻게 구현되는지 명확히 알 수는 없습니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 공지 |
읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다.
|
관리자 | 2017.06.20 | 18238 |
| 283 |
page 46 마우스 올릴시 이미지 출력
2
|
공부중 | 2020.09.10 | 323 |
| 282 | p.469 6번 질문드립니다. 4 | 열심히 공부하는 독자 | 2020.09.08 | 64 |
| 281 | open12 질문드립니다. 3 | 열심히 공부하는 독자 | 2020.09.08 | 111 |
| 280 | value 속성 1 | 열심히 공부하는 독자 | 2020.09.04 | 48 |
| 279 | 오타제보합니다. 1 | 컴퓨터공학생 | 2020.08.30 | 96 |
| 278 | p.133 질문이요 1 | 컴퓨터공학생 | 2020.08.30 | 74 |
| 277 | p.133 질문이요 1 | 컴퓨터공학생 | 2020.08.30 | 67 |
| 276 | p.469 실습 5번문제 4 | 열심히 공부하는 독자 | 2020.08.29 | 92 |
| 275 | 브라우저 크기 변경 1 | 열심히 공부하는 독자 | 2020.08.27 | 59 |
| 274 | 9장 실습9번 문제 2 | 열심히 공부하는 독자 | 2020.08.23 | 106 |
| » | Image객체 질문 4 | 열심히 공부하는 독자 | 2020.08.21 | 79 |
| 272 | DOM트리 질문 1 | 열심히 공부하는 독자 | 2020.08.17 | 76 |
| 271 | 몽구스 웹서버가 뭔가요? 1 | 안녕하세요 | 2020.08.16 | 101 |
| 270 | 이벤트리스너 질문 2 | 열심히 공부하는 독자 | 2020.08.16 | 63 |
| 269 | <script>태그의 위치 1 | 열심히 공부하는 독자 | 2020.08.15 | 58 |
| 268 | open 8 질문 2 | 열심히 공부하는 독자 | 2020.08.15 | 62 |
| 267 | p.254 3번문제 질문드립니다. 2 | 열심히 공부하는 독자 | 2020.08.14 | 48 |
| 266 | 예제 9-8 질문입니다. 2 | 모르겠어요 | 2020.07.31 | 101 |
| 265 | 예제 6-13 질문이요! 2 | 궁그미 | 2020.07.30 | 144 |
| 264 | border style 질문 2 | 궁그미 | 2020.07.28 | 41 |
"banana.png" 파일은 어디에 존재하는 파일입니까? 모든 이미지 파일은 웹 서버가 있는 컴퓨터에 있습니다.
1. 우선 myImg.src = "banana.png";이 실행되는 과정을 봅시다.
브라우저에 있는 자바스크립트 엔진이 웹서버에게 "banana.png"를 달라고 요청하고, 네트워크를 통해 이 파일의 바이트들을 전송받아
myImg. 객체 내에 저장합니다.
그러고 나서 myImg.의 이미지 버퍼에 있는 내용을 브라우저가 출력하겠지요.
그러니까 이 문장은 2개의 과정,
이미지 로딩과 이미지 출력의 과정으로 이루어집니다.
이미지가 만일 크다면 이미지가 출력되는데 까지 상당한 시간이 걸립니다.
2. 그래서, 다음 코드가 필요합니다.
var bananaImg = new Image();
bananaImge.src = "banana.png";
이 코드는 "banana.png" 이미지를 웹서버로부터 전송받아 bananaimg 객체 내부에 적재하는데 까지만 합니다.
bananaimg 객체는 DOM 트리에 붙어 있지 않기 때문에, bananaimg 객체에 적재된 이미지는 출력되지 못합니다.
bananaimg 객체는 미리 이미지를 웹 서버로부터 적재해두려는 목적으로 사용됩니다.
3. 이제 다음 코드를 봅시다.
myImg.src = bananaImg.src;
자바스크립트 엔진은 bananaImg의 객체에 저장된 이미지를 myImg 객체로 옮기는 작업을 처리합니다.
그 결과 myImg의 이미지가 화면에 출력됩니다.
결국 myImg.src = "banana.png";을 실행하는데 많은 시간이 걸리기 때문에 미리 "banana.png"를 웹서버로부터 네트워크를 통해 적재하기 해놓기 위해
bananaImg가 이용된 것이지요.
그런데 만일
하나의 이미지 DOM 객체에 상황에 따라 예를 들어 에제 9-15와 같이, 10개의 이미지를 번갈아 출력해야 하는 경우
아래와 같은 코드가 실행된다면
myImg.src = "banana.png";
myImg.src = "apple.png";
myImg.src = "apple.png";
myImg DOM 객체에 이미지가 바뀔 때마다 네트워크로부텀 가져와서 이미지를 출력하는 등 브라우저의 화면은 느리고 깜박이게 될 것입니다.
브라우저의 이미지 출력 속도를 높이려면 미리 10개의 이미지를 브라우저에 적재해둘 필요가 있는데
이때 new Image() 로 객체를 미리 10개 생성해두고 10개의 이미지를 적재해둔다면
myImg.src = bananaImg[i].src;
를 이용하여 적재된 이미지를 바꿔치기 하면 속도가 빨라지게 되는 겁니다.
결론적으로 다음 코드는
var bananaImg = new Image();
bananaImge.src = "banana.png";
미리 이미지를 웹서버로부터 전송받아 적재해두기 위하이며,
myImg.src = bananaImg.src; 는 적재된 이미지를 DOM 객체로 복사하여 화면에 출력하기 위함입니다.
414 페이지를 다시 읽어 보세요.
4. 마지막 질문을 살펴봅시다. 다음 두 문장이 같은 것일까요?
myImg.src = bananaImg.src;
myImg.src = "banana.png";
앞서 설명한 것처럼,
myImg.src = bananaImg.src; 는 bananaImg 객체에 적재된 이미지를 myImg 객체로 복사하는 것입니다. 만일 myImg 객체가 DOM 객체면 화면에 바로 출력됩니다.
하지만, myImg.src = "banana.png";이 코드는 banana.png를 웹서버에 요청하여 전송받아 myImg 객체에 저장하고 myImg가 DOM 객체라면 화면에 출력됩니다.
결국 이 두 문장은 다릅니다.
그래서 414 페이지의 제목이 이미지 로딩과 출력이라고 붙여져 있고, 412페이지부터 이 것에 관한 설명이 장황하게 있습니다.
휴~~ 답이 길어졌네요.
다시 간략하게 쓸 기운이 없으니 길지만 도움이 되었으면 합니다.