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';

    }

});

但是我不确定这是多少有效率和b）一旦所有图像成功加载后如何进行回调。

Answer 1

你应该使用标准的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();
});

Answer 2

我不知道它是否适合你的特殊情况，但我使用 http://thinkpixellab.com/pxloader/ 预加载图像。如果加载了所有图像，您可以添加路径并获得一个回调。之后你就可以开始动画了。

使用jQuery预加载图像集

2 个答案: