2

次のようなアニメーションのフレームである一連の画像があり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';

    }

});

しかし、a) これがどのように効率的であるか、b) すべての画像が正常に読み込まれた後にコールバックを実行する方法がわかりません。

4

2 に答える 2

3

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();
});
于 2012-10-17T14:58:10.767 に答える
1

それがあなたの特別なケースに合うかどうかはわかりませんが、 http：//thinkpixellab.com/pxloader/を使用 して画像をプリロードします。パスを追加して、すべての画像が読み込まれた場合に1つのコールバックを取得できます。その後、アニメーションを開始できます。

于 2012-10-17T14:57:47.273 に答える