jquery - 当我需要大量声音文件时，如何快速加载网页？

Question

我是网页设计的新手，并且正在建立一个用于学习切诺基音节的网页。主页面是一个由85个字符组成的表格，当您单击一个字符时，就会播放该字符的声音。目前，我在/ sounds文件夹中存储了所有以.mp3和.oog格式存储的声音文件，并且在HTML文档的末尾放置了85个不同的<audio>标签，并使用jQuery播放它们，如下所示。在笔记本电脑上页面加载时间还可以，但是在手机上确实很慢，我认为这是由于所有声音文件所致。如何以更快地加载页面的方式实现此目的？

$('td').click(function(){
  var name = $(this).find('.tbl-en').html();
  var tag = 'audio-' + name;
  var sound = document.getElementById(tag);
  sound.play();
});

<audio id="audio-a">
  <source src="sounds/a.mp3" type="audio/mp3">
  <source src="sounds/a.oog" type="audio/oog">
</audio>

Answer 1

在用户单击该元素之前，不要设置src属性。这是一个例子:

http://codepen.io/tevko/pen/raQMjP