Индикатор загрузки

Question

Я работаю над проектом, который требует звука для воспроизведения при нажатии на ссылку. Все отлично работает, я использовал Javascript ниже. Проблема в том, что для того, чтобы услышать файл, требуется около 30 секунд (в зависимости от скорости интернета), потому что браузер должен его скачать. Есть ли способ адаптировать приведенный ниже код для отображения индикатора загрузки файла?

<bgsound id="sound">
<script>
function PlaySound(url) {
  document.all.sound.src = url;
}
</script>

и это как ссылка:

<a href="#" onClick="PlaySound('/Lang/sounds/<?php echo $pid ?>A.wav')">Play</a>

Answer 1

Насколько я знаю, предупреждение о том, что "bgsound" является собственностью Internet Explorer.Сказав это, вы можете подписаться на его событие "readystatechage", чтобы узнать, когда он завершит загрузку .... (не проверено! Поскольку у меня нет IE)

<div id="soundLoading" style="display: none;"><img src="someani.gif" /></div>
<bgsound id="sound">
<script>
function PlaySound(url) {
  // Setup some loading animation here......
  document.all.soundLoading.style.display = "inline";

  // Add event listener and set the sound source
  sound.onreadystatechange = CheckSoundLoaded;
  document.all.sound.src = url;
}

function CheckSoundLoaded() {
  if(document.all.sound.readyState == 4) {
    // sound is loaded, remove loading animation
    document.all.soundLoading.style.display = "none";
  }
}
</script>

http://www.highdots.com/forums/javascript/finding-when-bgsound-downloads-47830.html

Answer 2

Простой

Самый простой способ - заменить текст «Воспроизвести» для ссылки на «Загрузка ...»:

<script type="text/javascript">
    //<![CDATA[
    function PlaySound(url, anchor) {
      anchor.innerHTML = 'Loading...';
      document.all.sound.src = url;
    }
    //]]>
</script>

<a href="#" onClick="PlaySound('/Lang/sounds/<?php echo $pid ?>A.wav', this)">Play</a>

Вот демонстрационная версия JS Fiddle.

---

Подробнее Продвинутый

Другой вариант - заменить текст привязки анимированным GIF:

<script type="text/javascript">
    //<![CDATA[
    function PlaySound(url, anchor) {
      anchor.innerHTML = '<img src="http://www.fordesigner.com/pic/zip/200916124527437778027.gif"/> Loading...';
      document.all.sound.src = url;
    }
    //]]>
</script>

<a href="#" onClick="PlaySound('/Lang/sounds/<?php echo $pid ?>A.wav', this)">Play</a>

Вот пример JS Fiddle .