미리 로드 및 JavaScript 이미지() 개체
고해상도 이미지가 많으면 웹사이트를 더욱 깔끔하게 만들 수 있습니다. 하지만 사이트 속도를 느리게 만들 수도 있습니다. 이미지는 파일이고 파일은 대역폭을 사용하며 대역폭은 대기 시간과 직접적인 관련이 있습니다. 이제 이미지 사전 로딩이라는 기술을 통해 웹 사이트 속도를 높이는 방법을 배울 시간입니다.
이미지 사전 로드
브라우저에서 이미지를 로드하려면 이미지에 대한 HTTP 요청을 보낸 후에만 브라우저에 의해 로드됩니다. 이미지에 대한 HTTP 요청은 ![js 프리로딩 및 JavaScript Image() 객체 사용법 소개_javascript 기술]()
를 사용합니다. 태그 또는 메소드 호출을 통해. 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>
...
