如何确保在运行函数之前加载所有资源？

Question

我正在开发一个播放随机音符序列的音乐网络应用程序，但我遇到了这个问题：每当我要在页面加载后第一次按下播放时，序列就会在走上正轨之前“窒息”。我想这可能是因为当我第一次按下播放时资源尚未加载。我想我是对的，做了一些研究，发现了这个 preload = auto 的东西，这似乎解决了这个问题。至少，如果您第一次刷新或访问页面并立即按播放，它就可以正常工作。然而，如果你有一段时间什么都不做，比如 2/3 分钟，同样的事情也会发生。有一个延迟启动，好像它正在加载文件，然后它笨拙地加速，就像它试图赶上 setInterval 计时器一样。我写了这个非常简化的代码版本只是为了说明：

<button>Play</button>
<audio src="source1.mp3"></audio>
<audio src="source2.mp3"></audio>
<audio src="source3.mp3"></audio>
<script>
    let notes = []
    document.querySelectorAll("audio").forEach(function(note){
        notes.push(note)
    })
    
    function play(){
        let random_index = Math.floor(Math.random() * 3),
        note = notes[random_index]
        note.play()
        setInterval(function(){
            note.pause()
            note.currentTime = 0
            play()
        }, 500)
    }
    
    let button = document.querySelector("button")
    button.addEventListener("click", function(){
        play() 
    })

</script>

所以我的问题是如何解决这个问题？有没有办法告诉函数保持直到它可以真正播放第一个文件？也许是在资源缓冲并准备好时触发的 DOM 事件？我觉得我不能让计时器开始，直到我有办法检查它，否则它会像往常一样发疯。任何想法将不胜感激！

Answer 1

页面完全加载后调用load事件：

window.addEventListener("load", function(){
  // Your code
});

DOMContentLoaded 事件在 DOM 加载之后但在 css 和 img 之前调用。

document.addEventListener("DOMContentLoaded", function(){
  // Your code
});