Я видел пример предварительной загрузки с использованием нескольких изображений, однако я не знаю, как применить их к моей ситуации, когда у меня есть только одно изображение, и я заменяю кадры, используя src.
У меня естья делаю спрайтовую анимацию, но так как я хочу использовать так много изображений, мне придется загрузить их перед началом.
Я знаю, что onload срабатывает каждый раз, когда src переключается и загружается.
Как предварительно загрузить изображения перед запуском таймера?Если я использую «img» onload для предварительной загрузки, должен ли я использовать другой объект Image для фактического отображения?
<script type="text/javascript">
function init(){
var numLabel;
var imgNumber = 1;
var lastImgNumber = 668;
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
var img = new Image;
img.onload = function(){
context.clearRect(0,0,context.canvas.width,context.canvas.height);
context.drawImage(img,0,0);
};
var timer = setInterval(function(){
if(imgNumber>lastImgNumber){
clearInterval(timer);
}else{
numLabel = padNum(imgNumber++,5);
img.src = "sprite images/opt/movie"+numLabel+".jpg";
}
}, 1000/24);
}
function padNum(num, digits){
var str = num + "";
return num.length >= digits? str: padNum("0" + str, digits);
}
</script>
Редактировать:
Я получил следующий код.Тем не менее, я думаю, что я собираюсь проверить метод спрайтовых листов, упомянутый ниже.
Я в основном пытаюсь сделать полноэкранное видео с короткими клипами, потому что я читаю видео в html5, у меня все еще есть проблемы с полноэкранным режимом.Кроме того, я думаю, что могу получить лучшее качество.
<script type="text/javascript">
var imageArray = new Array();
var loadedImages = new Array();
function init(){
buildImageArray(); //Execute the function to create the array of images
var total = imageArray.length;
var count = 0;
// loop through the images and load.
while(count < total) {
loadImage("sprite images/opt/" + imageArray[count],count);
count++;
}
}
function padNum(num, digits){
var str = num + "";
return num.length >= digits? str: padNum("0" + str, digits);
}
function buildImageArray(){
var firstImage = 1;
var lastImgNumber = 668;
var numLabel;
for(var i = firstImage; i<lastImgNumber+1;i++){
numLabel = padNum(i,5);
imageArray.push("movie"+numLabel+".jpg");
}
}
function loadImage(imageSrc,position) {
// actual function that loads image into DOM
var image = new Image(); // local scope, new object created per instance.
image.onload = function() {
if (!image) return;
loadedImages[position] = image.src; // record this image path as loaded in global scope
// or... store the objects themselves so you can inject them:
// loadedImages.push(this);
// sample report of progress
reportProgress();
// remove event and self to prevent IE on animated gif loops and clear up garbage.
image = image.onload = image.onabort = image.onerror = null;
};
image.src = imageSrc;
}
function reportProgress() {
// used to show how many images loaded thus far and / or trigger some event you can use when done.
// optional to show onscreen..., 'where' should be an object referencing an element in the DOM
// to do it silently, just remove the output bits below.
var output = "loaded ";
output += loadedImages.length;
output += " of ";
output += imageArray.length;
output += " images.";
$("#loader").html(output);
// this bit will fire when all images done:
if (imageArray.length == loadedImages.length) {
// total images onComplete. done. rewrite as you deem fit - call your main site load function from here
// keep in mind that if 1 of your images is a 404, this function may not fire, you
// may want to assign onerror and onabort events
//fire beginAnimation
beginAnimation();
}
}
function beginAnimation(){
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
var img = new Image;
var imgNumber = 0;
var lastImgNumber = 667;
img.onload = function(){
context.clearRect(0,0,context.canvas.width,context.canvas.height);
context.drawImage(img,0,0);
};
var timer = setInterval(function(){
if(imgNumber>lastImgNumber){
clearInterval(timer);
}else{
img.src = loadedImages[imgNumber];
}
imgNumber++;
}, 1000/20);
}
</script>