js의 이미지 객체와 사전 로딩 처리 example_javascript 기술

문서에 표시되지 않는 이미지 개체

문서에 표시되지 않는 이미지 개체의 경우 var 문을 사용하여 다음을 정의합니다.

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

var myImage = new Image(); 또는
var myImage = new Image(<이미지 주소 문자열>)

그런 다음 myImage 변수를 일반 Image 개체처럼 처리할 수 있습니다. 그러나 문서에 나타나지 않기 때문에 lowsrc, width, height, vspace, hspace, border 속성은 거의 사용되지 않습니다. 일반적으로 이러한 종류의 개체에는 이미지를 미리 로드하는 단 하나의 목적만 있습니다. 객체의 src 속성에 값을 할당하면 전체 문서 읽기와 자바스크립트 실행이 일시 중단되어 브라우저가 이미지 읽기에만 집중할 수 있기 때문입니다. 이미지를 미리 읽은 후 브라우저의 캐시에 이미지의 복사본이 있습니다. 실제로 이미지를 문서에 넣을 때가 되면 이미지가 즉시 표시될 수 있습니다. 요즘 웹페이지에는 마우스로 가리키면 이미지가 다른 이미지로 바뀌는 경우가 많습니다.

이미지 미리 읽기 JavaScript 예시

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

var imagePreload = new Image();

imagePreload.src = '001.gif'
imagePreload.src = '002.gif'
imagePreload.src = '003 .gif';

위의 예는 적은 수의 그림을 미리 읽는 데 적합합니다.

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

function imagePreload() {
var imgPreload = new Image();
for (i = 0; i < 인수.길이; i ) {
imgPreload.src = 인수[i]
}
}

imagePreload ('001.gif', '002.gif', '003.gif', '004.gif', '005.gif')

위의 예는 다음에 적합합니다. 많은 수의 사진을 미리 읽습니다.

많은 브라우저의 캐싱 문제로 인해. 이미지가 한 번 로드된 후 해당 이미지에 대한 다른 요청이 있는 경우 브라우저가 이미 이미지를 캐시했기 때문에 새 요청을 시작하지 않고 캐시에서 직접 로드하여 분석 후 이미지를 사용할 수 있습니다. --complete 속성은 각 브라우저와 호환됩니다. 따라서 다음 예와 같이 이미지 온로드 이벤트 전에 이 값을 판단하십시오.

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

function loadImage(url, callback) {
var img = new Image() //이미지를 미리 다운로드하기 위한 Image 객체 생성
img.src = url ;

if (img.complete) { // 이미지가 이미 브라우저 캐시에 있는 경우 콜백 함수를 직접 호출합니다.
callback.call(img)> // 직접 반환; onload 이벤트 처리 없이
}

img.onload = function () { //이미지 다운로드 시 콜백 함수를 비동기적으로 호출합니다.
callback.call(img);//콜백 함수를 이미지 객체로 대체합니다.
}
};