Javascript 使用jQuery预加载图像集

我有一组动画中的帧图像，比如：

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);
    });

$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();
});

var图像=[
'img/nav one selected.png'，
'img/nav two selected.png'，
'img/nav three selected.png'，
'img/nav four selected.png'
];
$（图像）。每个（函数（）{
var image=$（'
但在本例中，在var中列出图像是不可行的，我还希望在图像全部加载后启动启动动画

到目前为止，我有以下几点：

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);
    });

$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();
});

$spinner\u currentFrame=1；
$numFrames=400；
函数preload images（）{
$（$图像）。每个（函数（）{
var image=$（'$numFrames）{
$spinner\u currentFrame=1；
}
log（$spinner\u currentFrame）；
$（'#spinner'）.css（“背景图像”，“url（frame-”+$spinner_currentFrame+”.jpg）”）；
}
$（文档）.ready（函数（）{
预加载图像（）；
});

因此，我的计划是预加载从1到400的图像，然后一旦完成，然后启动动画

我曾经想过这样的事情：

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

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

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

    }

});

$images=[]；
$frame=1；
$numFrames=400；
$（$frame）.each（函数（）{
$frame=$frame+1；
如果（$frame我不知道它是否适合您的特殊情况，但我使用
要预加载图像。如果加载了所有图像，您可以添加路径并获得一个回调。之后，您可以启动动画。
我不知道它是否适合您的特殊情况，但我使用
若要预加载图像，您可以添加路径，并在加载所有图像时获得一个回调。之后，您可以启动动画。
您应该使用标准javascript for loop，而不是jQuery的foreach。foreach非常适合在数组或对象集上循环，但在这种情况下不行。下面是一个示例，请注意，您必须：在设置映像对象的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();
});

var加载的_图像=0；
var帧=400；
var图像=[]；
函数preload images（）{
对于（i=0；i=帧）{
startAnimation（）；
}
}
函数startAnimation（）{
var frameNumber=0；
var timer=setInterval（函数（）{
$（'imgdom element'）.attr（'src'，images[frameNumber]）；
如果（帧编号>帧）{
frameNumber=0；
其他的
frameNumber++；
}，（1000/30））；/（1000/30）=每秒30帧
}
$（文档）.ready（函数（）{
预加载图像（）；
});
您应该使用标准的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();
});

var加载的_图像=0；
var帧=400；
var图像=[]；
函数preload images（）{
对于（i=0；i=帧）{
startAnimation（）；
}
}
函数startAnimation（）{
var frameNumber=0；
var timer=setInterval（函数（）{
$（'imgdom element'）.attr（'src'，images[frameNumber]）；
如果（帧编号>帧）{
frameNumber=0；
其他的
frameNumber++；
}，（1000/30））；/（1000/30）=每秒30帧
}
$（文档）.ready（函数（）{
预加载图像（）；
});
当传输这么多文件（400+）时，您应该开始考虑使用一种技术，如仍然需要填充问题所问的列表：）当传输这么多文件（400+）时，您应该开始考虑使用一种技术，如仍然需要填充问题所问的列表：）请注意，这不是经过测试的代码，也不是生产就绪的代码，我只是从头开始写的。相反，这是为了让您了解如何解决问题。请注意，这不是经过测试的代码，也不是生产就绪的代码，我只是从头开始写的。相反，这是为了让您了解如何解决问题。