javascript - 使用 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';

    }

});

但我不确定 a) 效率如何，以及 b) 所有图像加载成功后如何执行回调。

Answer 1

您应该使用标准的 javascript for 循环而不是 jQuery 的 foreach。 Foreach 非常适合循环数组或对象集，但在本例中则不然。这是一个示例，请注意，在设置 Image 对象的 src 属性之前，您必须绑定(bind) 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();
});