javascript - 如何确保在运行函数之前加载所有资源?
问题描述
我正在开发一个播放随机音符序列的音乐网络应用程序,但我遇到了这个问题:每当我要在页面加载后第一次按下播放时,序列就会“窒息”在走上正轨之前。我想这可能是因为当我第一次按下播放时资源尚未加载。我想我是对的,做了一些研究,发现了这个 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 事件?我觉得我不能让计时器开始,直到我有办法检查它,否则它会像往常一样发疯。任何想法将不胜感激!
解决方案
load
页面完全加载后调用该事件:
window.addEventListener("load", function(){
// Your code
});
DOMContentLoaded
在加载 DOM 之后但在 css 和 img 之前调用该事件。
document.addEventListener("DOMContentLoaded", function(){
// Your code
});
推荐阅读
- r - 如何多次运行此函数并绘制每个结果?
- mysql - 在表中生成不同维度的列表
- tensorflow - 如何隐藏目标检测训练中的重复信息?
- python - Networkx 绘图功能在 Jupyter 中不起作用
- vb.net - 如何扩展任意类型的List类
- angular - CanLoad 返回 true 但什么也不做
- c# - 我所有使用 FontAwesome 的 HTML 标签似乎都添加了 aria-hidden="true" 。这是怎么回事?
- c# - dotnet core IdentityModel 不会内省从第三方 IDaaS 发出的令牌
- mysql - 优化两个表的 SQL 查询
- html - 使用复选框过滤图像后,如何将图像放置在砌体布局的同一行中?