使用jQuery预加载图像集
使用jQuery预加载图像集
提问于 2012-10-17 22:49:56
我有一组图像，它们是动画中的帧，比如：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中列出图像是不可行的，而且我还希望在所有图像都加载完毕后启动start动画。
到目前为止，我有以下几点：
$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变量呢？
我想过这样的事情：
$images = [];
$frame = 1;
$numFrames = 400;
$($frame).each(function() {
$frame = $frame + 1;
if($frame <= $numFrames) {
$images =+ 'frame-' + $frame + '.jpg';
}
});但我不确定a)这是否有效，b)当所有图像都加载成功后如何进行回调。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-10-17 22:58:11
您应该使用标准的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();
});Stack Overflow用户
发布于 2012-10-17 22:57:47
我不知道它是否适合你的特殊情况，但我使用http://thinkpixellab.com/pxloader/预加载图像。您可以添加路径，如果所有镜像都已加载，则可以获取一个回调。之后，您可以开始动画。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12937080
复制相关文章
相似问题
腾讯云开发者
