加载图像后加载音频不起作用

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");
    };
};