new Image()로 만드는 이미지 객체의 목적은 이미지를 미리 로딩해두려는 것입니다. "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페이지부터 이 것에 관한 설명이 장황하게 있습니다.
"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페이지부터 이 것에 관한 설명이 장황하게 있습니다.
휴~~ 답이 길어졌네요.
다시 간략하게 쓸 기운이 없으니 길지만 도움이 되었으면 합니다.