Загрузка звука не работает после загрузки изображения

Question

Аудиофайл не загружается после загрузки изображения (консоль Javascript не отображает «Аудио загружено»):

//Audio object :
var audio = new Audio("foo.mp3");

//Image :
var img = new Image();
img.src = "foo.png";

//Loading image :
img.onload = function()
{
    console.log("Image loaded");    

    //Loading audio file :
    audio.onloadeddata = function()
    {
        console.log("Audio loaded");
    };
};

Так почему этот код не работает?

Answer 1

Вы подключаете аудиослушатель в img.onload.Это означает, что только если изображение загружается первым, а затем аудио заканчивается, вы получите console.log.Решение: уберите audio.onloadeddata из img.onload.

Редактировать: из вашего комментария теперь ясно, что вы хотите сначала загрузить изображение.Но эта строка:

var audio = new Audio("foo.mp3");

уже начинает загружать аудио ..

Вам нужно загрузить его при загрузке изображения, сделайте так:

// Image :
var img = new Image();
img.src = "foo.png"; // starts loading image

// When image loading is done:
img.onload = function()
{
    console.log("Image loaded");    
    // Audio object :
    var audio = new Audio("foo.mp3"); // starts loading audio
    // When loading is done:
    audio.onloadeddata = function()
    {
        console.log("Audio loaded");
    };
};