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

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