I am developing a simple html5 game. I use this set of functions as first calls on page load to check if all my media content (a .png and a .mp3 so far...) is properly loaded before initializing the game itself:
//initialize and keep count of how many media elements get successfully loaded....
function initMedia(pics, audio)
{
game.requiredImages = pics.length;
game.requiredFX = audio.length;
for(i in pics)
{
var img = new Image();
img.src = pics[i];
game.images[i] = img;
game.images[i].onload = function(){
game.loadedImages++;
};
}
for(ii in audio)
{
var fx = new Audio();
fx.src = pics[ii];
game.audio[ii] = fx;
game.audio[ii].onload = function(){
game.loadedFX++;
};
}
}
//check how many media files are loaded against the expected amount
function checkMediaLoading()
{
if(game.loadedImages >= game.requiredImages && game.loadedFX >= game.requiredFX)
//if all the media elements are there this function triggers the rest of the code
pullAndPrepareText(gametext);
else
{
setTimeout(function(){
checkMediaLoading(); //...if not check again...
}, 100);
}
}
//pass two arrays with the paths to the images and audio files
initMedia(["imgs/ship_001.png"],["audio/thrust.mp3"]);
//start checking the media loading status
checkMediaLoading();
But I get an error thrown (FF): “Content-Type“ HTTP “image/png” is not supported.
The problem is that this occurred only after I added the audio file checking to the system. Before it was only the image path passed to the function, hence only one loop and one condition to trigger the last function. After adding the audio I got the error thrown but just ABOUT THE PNG FILE...
Can someone please point onto the right direction to fix this?
Thanks you...!