使用jQuery预加载一组图像

我有一组图像是动画中的帧，如：frame-1.jpg, frame-2.jpg，我有大约400幅图像。使用jQuery预加载一组图像

我想要做的是在动画开始之前预先加载这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 = []; 
$frame = 1; 
$numFrames = 400; 
$($frame).each(function() { 

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

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

    } 

});

但我不知道怎么一）有效，这是和b）如何做一次所有图像都成功加载回调。

来源

2012-10-17 Cameron

当transfering这么多的文件（400+），你应该开始使用像https://github.com/jAndreas/Supply – jAndy

仍需填充列表是什么的问题是问的技术考虑:) – Cameron

你应该使用标准的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-17 14:58:10 macguru2000

请注意，这是没有测试，也没有生产准备好的代码，我只是把它写在我头上。相反，它是为了给你一个关于如何解决你的问题的想法。 – macguru2000

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

来源

2012-10-17 14:57:47

使用jQuery预加载一组图像

回答

相关问题