如果加载了某些图像，则播放声音

Question

我有一个声音文件，只有当我的页面上的某个图像被加载时，我才希望他能够听到它。

我该如何管理？

我需要将哪些内容添加到文档中？

Answer 1

包含ImagesLoaded()插件。

<强> HTML

<audio id="my_sound">
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">

  Your browser does not support this audio format.
</audio>

<强>的jQuery

var audio = document.getElementById('my_sound');

$('img#my_image').imagesLoaded(function(e) {
    audio.play();
});

Answer 2

的 jsBin demo 的

HTML：

<img class="alertSound" src="img.jpg" /> 


<audio id="imgLoadedSound" src="loaded.ogg">
  Your browser does not support the <code>audio</code> element.
</audio>

JS：

$('img.alertSound').load(function(){
     $('#imgLoadedSound').get(0).play();
});

或更好： 的 JsBin demo 的

$(function() {

    function imgIsLoaded() {

      var audio = new Audio('loaded.ogg');
      var img = new Image().src = this;
      img.onload = function(){
        audio.play();
      };

    }

    $('img.alertSound').each(function() {
        if( this.complete ) {
            imgIsLoaded.call( this );
        } else {
            $(this).one('load', imgIsLoaded);
        }
    });


});