JAVASCRIPT#63 - 프리로드 .inArray

Dat sugar pony girl tho.

JAVASCRIPT#63 - 프리로드 

1. .inArray() 메소드에 대하여

- 배열을 검사해서 해당 요소를 찾아내서 인덱스를 반환하는 메소드

- 형식 : $.inArray(찾을소요, 배열)

- jQuery.inArray( "John", arr )

gameFramework.addImage = function(url){
    if($.inArray(url, gameFramework.imagesToPreload) < 0){
        gameFramework.imagesToPreload.push(url);
    }
}

addImage는 이미지 추가함수로

입력받은 이미지의 url을 imagesToPreload에 저장하는 함수이다.

위의 if구문은 만약 배열안에 해당 url이 없는경우에만 url을 저장하게 한다.

2. 프리로드 함수

gameFramework.startPreloading = function(endCallback, progressCallback){
    var images = [];
    var total = gameFramework.imagesToPreload.length;

    for(var i = 0; i < total; i++)
    {
        var image = new Image();
        images.push(image);
        image.src = gameFramework.imagesToPreload[i];
    }

    var preloadingPoller = setInterval(function(){
        var counter = 0;
        var total = gameFramework.imagesToPreload.length;
        for (var i = 0; i < total; i++)
        {
            if(images[i].complete)
            {
                counter++;
            }
        }
        if(counter == total)
        {
            clearInterval(preloadingPoller);
            endCallback();
        }
        else
        {
            if(progressCallback)
            {
                count++;
                progressCallback((count / total) * 100);
            }
        }

    }, 100);
}

콜백함수 즉 함수자체를 2개받는 기묘한 함수가 바로 startPreloading 얘다.

endCallback 은 끝났음을 알리는 함수로 아직 정의되지 않았다.

progressCallback 은 완료퍼센테이지를 파라미터로 받아서 얼마나 완료됬는지 표시해주는 역할을하는 함수로 이또한 아직 정의되지않았다. count 라는 변수또한 progressCallback 쪽 변수이다.

첫번째 for 문은 imagesToPreload 에 저장된 주소들을 이미지 객체의 src로 옮기는 작업을 하고 있다.

두번째로 살펴볼것은 preloadingPoller 가는 inverval 함수인데 이것은 로딩이 완료됬는지 images[i].complete 를 통해서 검사하고 완료됬으면 수를 증가시키고 증가된 수가 이미지 총 모음집 원본인 imagesToPreload 배열의 총 길이(개수)와 같아지면 모든 이미지가 로드된것으로 파악하고 자체 종료된다.

function endCallback() {
    alert("all loaded!");
}

function progressCallback(percent) {
    alert(percent + "%");
}

일단 책에서는 아직 안알랴줬지만 급한데로 end콜백과 progress콜백을 만들어서 사용해보았다.

당연히 이미지는 AJ.png 하나이므로 프로그래스 콜백따윈 나오지 않는다.

그런데 의문점이 하나 남았다. 저위에 count++ 라는거. 이 변수는 정의된적도 없는데 지맘대로 나와서 ++해지고 있다.

어느정도 이미지가 로드됬는지 알려주는것 같은데, 옳지않다고 본다. 차라리, counter / total * 100 이라는 걸 파라미터로 전달시키는게 어떨까?

그래도 된다.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ엌ㅋ

mygame 페이즈3 프리로드.zip