Node.js는 이미지 개체를 사용하여 이미지를 미리 로드하여 액세스 속도를 향상합니다._javascript 기술

많은 수의 고해상도 이미지를 사용하면 웹사이트가 실제로 눈에 띄게 보일 수 있습니다. 그러나 사이트 액세스 속도도 느려지게 됩니다. 사진은 파일이고 파일은 대역폭을 차지하며 대역폭은 액세스 대기 시간과 직접적인 관련이 있습니다. 이제 이미지 액세스 속도를 향상시키기 위해 이미지 사전 로드라는 작은 트릭을 배워보겠습니다.

일부 브라우저는 이러한 이미지를 로컬 캐시에 저장하여 이 문제를 해결하려고 합니다. 이를 통해 이미지를 순차적으로 호출할 수 있지만 이미지를 처음 사용할 때는 여전히 지연이 있습니다. 사전 로드는 이미지가 필요하기 전에 이미지를 캐시에 다운로드하는 기술입니다. 이러한 방식으로 이미지를 표시해야 할 경우 캐시에서 신속하게 복원하여 즉시 표시할 수 있습니다.

Image() 개체
이미지를 미리 로드하는 가장 간단한 방법은 JavaScript를 사용하여 새 Image() 개체를 만든 다음 미리 로드하려는 이미지의 URL을 전달하는 것입니다. 이 개체에. Heavyimagefile.jpg라는 이미지 파일이 있고 사용자가 기존 이미지 위로 마우스 포인터를 이동할 때 이 파일이 표시되기를 원한다고 가정합니다. 이 파일을 더 빠르게 미리 로드하려면, HeavyImage라는 이름의 새 Image() 객체를 생성한 다음 onLoad() 이벤트 핸들러를 통해 페이지에 동기적으로 로드하면 됩니다.

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

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






< ;/html>


이미지 태그 자체는 onMouseOver() 및 onMouseOut() 이벤트를 처리하지 않으므로 위 예의 이유는 태그에는 이러한 이벤트 유형에 대한 지원이 포함됩니다.

배열을 통해 여러 이미지 로드
예를 들어 여러 이미지 메뉴 표시줄을 포함하는 애플리케이션의 경우 두 개 이상의 이미지를 미리 로드해야 할 수도 있습니다. 부드러운 애니메이션 효과를 얻으려면. 이를 구현하는 것은 어렵지 않습니다. 다음 예와 같이 JavaScript 배열을 사용하면 됩니다.

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

위의 예에서는 변수 i와 imageObj라는 Image() 객체를 정의합니다. 그런 다음 새로운 배열 Images[]가 정의되고 각 배열 요소는 미리 로드해야 하는 이미지의 주소 소스를 저장합니다. 마지막으로 for() 루프를 사용하여 전체 배열을 반복하고 Image() 객체를 각 요소에 할당하여 이미지를 캐시에 미리 로드합니다.