JavaScript 고급 튜토리얼(Lesson 4 Part 1)_기본 지식

이전 수업에서는 텍스트와 문자열에 대한 다양한 작업을 배웠습니다. 오늘은 이미지와 개체라는 두 가지 데이터 유형에 중점을 둡니다. 이 강의를 듣고 나면 다음 방법을 알게 됩니다.
JavaScript를 사용하여 이미지 교환 속도를 높이세요.​
스크립트를 더 쉽게 이해할 수 있도록 자신만의 개체를 만드세요.​
연관 배열을 사용하면 스크립트의 모든 개체에 빠르게 액세스할 수 있습니다.
이미지 변환에 JavaScript를 사용할 때의 주요 문제점 중 하나는 이미지를 변경해야 할 때까지 브라우저에 해당 이미지를 다운로드하라고 지시하지 않는다는 것입니다. 큰 이미지가 있고 이미지 위에 마우스를 올렸을 때 해당 이미지를 불러오려면 브라우저가 일시적으로 이미지를 다운로드해야 하는데, 이 경우 시간이 좀 걸리고 슬라이딩 효과가 크게 줄어들 수 있습니다.
연결 속도가 느리고 로드하려는 이미지가 상당히 큰 이미지인 경우 이미지 위에 마우스를 놓은 후 기다려야 합니다. 일부 브라우저에서는 로드된 이미지를 버퍼에 저장해야 하므로 때로는 이미지 변환 효과가 전혀 표시되지 않을 수도 있습니다. 이러한 성가신 문제를 피하기 위해 페이지가 로드될 때 변환될 이미지를 미리 로드할 수 있습니다.
웹 프로그래밍에서 프리로딩은 이미지가 필요해지기 전에 캐시에 다운로드하는 기술입니다. 이러한 방식으로 이미지를 표시해야 할 경우 캐시에서 신속하게 복원하여 즉시 표시할 수 있습니다.
이미지를 미리 로드하는 것은 실제로 어렵지 않습니다. 여러분이 해야 할 일은 새 이미지 객체를 생성한 다음 아래와 같이 사전 설치할 이미지의 이름을 이미지의 src 속성에 설정하는 것뿐입니다.
var an_image = 새 이미지();
an_image.src = "my_nice_image.gif";
이미지의 src 속성을 설정하면 이미지가 자동으로 하드 드라이브에 다운로드될 수 있으며(물론 캐시를 사용할 수 있다는 가정 하에) 이미지가 변경되면 하드 드라이브에서 직접 이미지를 읽을 수 있습니다. 다운로드하지 않고도 운전할 수 있습니다.​
페이지를 다운로드한 후 이미지 변환 작업 전에 미리 로드된 이미지가 발생하도록 하는 방법만 남았습니다. 좋은 점은 쉽다는 것입니다. HTML의 body 태그에는 페이지가 로드될 때 호출되는 onLoad라는 이벤트 핸들러가 있습니다. body 태그가 다음과 같은 경우:

그러면 웹페이지가 다운로드된 후 doPreload() 함수가 호출됩니다. 함수의 코드는 다음과 같습니다.
함수 doPreload()
{
var the_images = new Array(kwmatt.jpg,matbon.jpg,lunchMat.jpg);
preloadImages(the_images);
}
함수 preloadImages(the_images_array) {
for(loop = 0; loop                             
var an_image = 새 이미지();
an_image.src = the_images_array[loop];
}
}
doPreload() 함수는 미리 로드해야 하는 이미지 이름의 배열을 생성하고 이 배열을 preloadImages() 함수에 매개 변수로 전달합니다. preloadImages() 함수에는 루프가 포함되어 있으며 각 루프는 새 이미지를 생성합니다. .객체를 만들고 이미지 이름을 src 속성으로 설정합니다.
어렵지 않나요? 이미지 개체는 꽤 유용합니다. 그렇죠? 그렇게 생각해주셔서 기뻐요. 잠시 쉬면서 좀 더 흥미롭고 두뇌를 자극하는 주제인 자신만의 개체를 만들어 보겠습니다.