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

您应该使用标准的 javascript for 循环而不是 jQuery 的 foreach。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/ 预加载图像。如果加载了所有图像，您可以添加路径并获得一个回调。之后就可以开始动画了。

于 2012-10-17T14:57:47.273 回答