js 프리로딩 및 JavaScript Image() 객체 사용법 소개_javascript 기술

미리 로드 및 JavaScript 이미지() 개체

고해상도 이미지가 많으면 웹사이트를 더욱 깔끔하게 만들 수 있습니다. 하지만 사이트 속도를 느리게 만들 수도 있습니다. 이미지는 파일이고 파일은 대역폭을 사용하며 대역폭은 대기 시간과 직접적인 관련이 있습니다. 이제 이미지 사전 로딩이라는 기술을 통해 웹 사이트 속도를 높이는 방법을 배울 시간입니다.
이미지 사전 로드
브라우저에서 이미지를 로드하려면 이미지에 대한 HTTP 요청을 보낸 후에만 브라우저에 의해 로드됩니다. 이미지에 대한 HTTP 요청은 를 사용합니다. 태그 또는 메소드 호출을 통해. JavaScript 스크립트를 사용하여 마우스 오버 이벤트 시 이미지 교체를 처리하거나 일정 시간이 지난 후 자동으로 이미지를 변경하는 경우 서버에서 이미지를 가져오는 동안 몇 초에서 몇 분 정도 기다려야 할 수 있습니다. 이는 느린 인터넷 연결을 사용하거나 검색하려는 이미지가 매우 크거나 이 경우 지연으로 인해 예상한 결과를 얻을 수 없는 경우 특히 그렇습니다.
일부 브라우저는 이미지에 대한 후속 호출이 즉시 충족될 수 있도록 이미지를 로컬 캐시에 저장하는 등 이 문제를 완화하기 위한 몇 가지 조치를 취합니다. 그러나 이미지가 처음 호출될 때 여전히 몇 가지 문제가 있습니다. . 지연. 사전 로드는 이미지가 필요하기 전에 캐시에 이미지를 다운로드하는 방법입니다. 이렇게 하면 이미지가 실제로 필요할 때 캐시에서 가져와 즉시 표시할 수 있습니다.
Image() 객체
이미지를 미리 로드하는 가장 쉬운 방법은 JavaScript에서 새 Image() 객체를 인스턴스화한 다음 로드해야 하는 이미지의 URL을 다음과 같이 전달하는 것입니다. 매개변수 Heavyimagefile.jpg라는 이미지가 있고 사용자의 마우스가 이미 표시된 이미지 위에 놓일 때 이 이미지를 표시하려고 한다고 가정합니다. 더 빠른 응답 시간을 위해 이 이미지를 미리 로드하려면 Image() 객체인 HeavyImage를 생성하고 이를 onLoad() 이벤트 핸들러에서 동시에 로드하면 됩니다.

코드 복사 코드는 다음과 같습니다.

head>
<스크립트 언어 = "JavaScript">
function preloader()
{
heavyImage = new Image()
heavyimagefile.jpg"; 🎜>}






< ;/html>


이미지 태그 자체는 onMouseOver() 및 onMouseOut() 이벤트를 처리할 수 없으므로 ; 위 예의 태그 같은 이유로 태그는 두 가지 이벤트 유형을 모두 지원합니다.

배열을 사용하여 여러 이미지 로드
실제 애플리케이션에서는 여러 이미지가 스크롤되는 메뉴 표시줄에 하나가 아닌 여러 이미지를 미리 로드해야 할 수도 있습니다. 부드러운 효과를 만들려면 여러 이미지를 미리 로드해야 합니다. 실제로 이것은 어렵지 않습니다. 다음 예와 같이 JavaScript 배열을 사용하면 됩니다.

코드 복사 코드는 다음과 같습니다.

위의 예에서는 변수 i와 Image() 객체 imageObj를 정의합니다. 그런 다음 새로운 배열 Images[]가 정의되고, 각 배열 요소는 미리 로드할 이미지를 저장합니다. 마지막으로 전체 배열을 처리하고 각 요소를 Image() 개체에 할당하여 캐시에 로드하는 for() 루프를 만듭니다.
onLoad() 이벤트 핸들러
JavaScript의 다른 많은 객체와 마찬가지로 Image() 객체에도 몇 가지 이벤트 핸들러가 있습니다. 가장 유용한 것 중 하나는 확실히 이미지가 완전히 로드된 후에 호출되는 onLoad() 핸들러입니다. 이 이벤트 핸들러는 이미지가 완전히 로드된 후 일부 특정 작업을 수행하기 위해 사용자 정의 함수에 연결될 수 있습니다. 아래 예에서는 이미지가 로드되는 동안 먼저 "잠시 기다려 주십시오" 화면을 표시한 다음 로드가 완료되면 브라우저를 새 URL로 전달합니다.

코드 복사 코드는 다음과 같습니다.

head>


...




물론 이미지 배열을 만든 다음 이를 반복하여 각 이미지를 미리 로드할 수도 있습니다. 그런 다음 각 단계에서 로드된 이미지 수를 추적합니다. 모든 이미지가 로드되면 이벤트 핸들러의 프로그램 논리에 따라 브라우저를 다음 페이지로 이동하거나 다른 작업을 수행할 수 있습니다.

사전 로드 및 다중 상태 메뉴

이제, 배운 모든 이론을 실제 응용 프로그램에서 어떻게 사용합니까? 아래 코드는 제가 최근에 가끔 작성했던 메뉴바입니다. 이 메뉴바는 몇 개의 버튼(이미지 링크)으로 구성되어 있으며, 각 버튼에는 일반, 호버, 클릭의 세 가지 상태가 있습니다. 버튼에는 여러 상태가 있으므로 메뉴 상태가 빠르게 반응할 수 있도록 이미지 사전 로드를 사용해야 합니다. 목록 A의 코드는 이를 수행하는 방법을 보여줍니다. 목록 A의 HTML 코드는 각각 일반, 마우스 오버, 클릭의 세 가지 상태를 갖는 4개의 버튼으로 구성된 메뉴를 설정합니다. 요구사항은 다음과 같습니다.
# 일반 상태에서 버튼 위에 마우스를 올리면 호버 상태로 변경됩니다. 마우스를 다른 곳으로 이동하면 버튼이 정상 상태로 돌아갑니다. # 마우스로 버튼을 클릭하면 버튼이 클릭됩니다. 다른 버튼을 클릭할 때까지 이 상태가 유지됩니다.
# 버튼을 클릭하면 다른 버튼의 상태는 클릭할 수 없습니다. 다른 버튼은 호버 상태 또는 일반 상태에만 있을 수 있습니다.
# 동시에 하나의 버튼만 클릭할 수 있습니다.
# 동시에 하나의 버튼에만 마우스를 올릴 수 있습니다.
첫 번째 작업은 메뉴의 각 상태에 대한 이미지를 저장할 배열을 설정하는 것입니다. 이러한 배열 요소에 해당하는 도 HTML 문서의 본문(body)에 생성되어 순차적으로 이름이 지정됩니다. 해당 요소의 이름은 1부터 지정되지만 배열 값은 0부터 인덱싱됩니다. 이를 위해서는 나중에 스크립트에서 계산 조정이 필요합니다.
preloadImage() 함수는 마우스 움직임의 응답 시간을 최소화하기 위해 모든 이미지를 캐시에 저장하는 역할을 합니다. for() 루프는 첫 번째 단계에서 생성된 이미지를 반복하고 각 반복에서 이미지를 미리 로드하는 데 사용됩니다.