jQuery를 사용하여 이미지 미리로드하기

Question

frame-1.jpg, frame-2.jpg과 같은 애니메이션의 프레임 인 이미지 세트가 있고 약 400 개의 이미지가 있습니다.

내가하고 싶은 것은 애니메이션이 시작되기 전에 400 개의 이미지를 사전로드하는 것입니다. 이미지를 사전로드 할 때

보통 나는 다음과 같은 사용

var images = [ 
     'img/nav-one-selected.png', 
     'img/nav-two-selected.png', 
     'img/nav-three-selected.png', 
     'img/nav-four-selected.png' 
    ]; 

    $(images).each(function() { 
     var image = $('<img />').attr('src', this); 
    }); 

그러나이 경우에

는, var에있는 이미지를 나열하는 것은 가능하지 않으며, 또한 이미지가 일단 시작 애니메이션을 해고 할 모두로드되었습니다.

지금까지 나는 다음과 같습니다

$spinner_currentFrame = 1; 
$numFrames = 400; 

function preloadImages() { 
    $($images).each(function() { 
     var image = $('<img />').attr('src', this); 
    }); 
    startAnimation(); 
} 

function startAnimation() { 
    $spinner_loadingAnim = setInterval(function() { 
     UpdateSpinner(); 
    }, 140); 
} 

function UpdateSpinner() { 
    $spinner_currentFrame = $spinner_currentFrame + 1; 
    if($spinner_currentFrame > $numFrames) { 
     $spinner_currentFrame = 1; 
    } 
    console.log($spinner_currentFrame); 
    $('#spinner').css("background-image", "url(frame-" + $spinner_currentFrame + ".jpg)"); 
} 

$(document).ready(function() { 
    preloadImages(); 
}); 

그래서 계획은 내가 1에서 400까지이며, 그 완성 된 후에는 다음 다음 애니메이션을 시작 이미지를 미리로드 것입니다. 그래도 어떻게 $ images var를 만들겠습니까?

내가 좋아하는 뭔가에 대해 생각했습니다

$images = []; 
$frame = 1; 
$numFrames = 400; 
$($frame).each(function() { 

    $frame = $frame + 1; 
    if($frame <= $numFrames) { 

    $images =+ 'frame-' + $frame + '.jpg'; 

    } 

}); 

하지만이는 방법) 효율적인 모르겠어요과 ㄴ) 한 번에 모든 이미지가 성공적으로로드 한 콜백을 수행하는.

Answer 1

jQuery의 foreach 대신 표준 javascript for 루프를 사용해야합니다. Foreach는 배열이나 객체 집합을 반복하는 데 유용하지만이 경우는 아닙니다. 다음은 예제입니다. Image 객체의 src 속성을 설정하기 전에 onload 이벤트 핸들러를 바인딩해야합니다.

업데이트 : 전체 예제를 완료하는 데 더 많은 기능이 추가되었습니다.

var loaded_images = 0; 
var frames = 400; 
var images = []; 

function preloadImages() { 
    for (i=0; i < frames; i++) { 
     images[i] = new Image(); 
     images[i].onload = function() { 
      loaded_images += 1; 
      checkLoadingFinished(); 
     } 
     images[i].src = 'frame-' + i + '.jpg'; 
    } 
} 

function checkLoadingFinished() { 
    if (loaded_images >= frames) { 
     startAnimation(); 
    } 
} 

function startAnimation() { 
    var frameNumber = 0; 
    var timer = setInterval(function() { 
     $('#img-dom-element').attr('src', images[frameNumber]); 

     if (frameNumber > frames) { 
      frameNumber = 0; 
     else 
      frameNumber++; 

    }, (1000/30)); // (1000/30) = 30 frames per second 
} 

$(document).ready(function() { 
    preloadImages(); 
}); 

Answer 2

특별한 경우에 맞는지는 잘 모르겠지만 이미지를 미리 불러 오려면 http://thinkpixellab.com/pxloader/ 을 사용합니다. 모든 이미지가로드되면 경로를 추가하고 하나의 콜백을 얻을 수 있습니다. 그 후에 애니메이션을 시작할 수 있습니다.