执行函数时，只加载图像/声音，Jquery

Execute function only when images/sounds are loaded, Jquery

本文关键字：声音 Jquery 图像 函数 执行 加载      更新时间：2023-09-26

当窗口/文档已经加载时，我动态设置图像和音频源，例如，我在用户对页面执行一些操作后设置它们:

// image and audio set
jQuery("#image").css('background-image', 'url(../content/icons/1/18.png)').css('backgroundPosition', '0 -40px');
var myAudio = new Audio('http://domain/content/audio/1/full-18.mp3');
myAudio.pause();
// i want this part of code be executed only when images and audio is fully loaded
myAudio.play();

解决方案1，不工作

jQuery("#page").load(function() {});

解决方案2，不工作

jQuery(window).load(function() {});

还有什么办法可以解决这个问题吗?提前谢谢大家

您需要专门针对image元素来检查它是否已加载。

$('#image').load(function () {
    console.log('image loaded');
});

要检查音频元素是否准备好播放，您需要使用onloadeddata。

var myAudio = new Audio('http://www.mfiles.co.uk/mp3-downloads/edvard-grieg-peer-gynt1-morning-mood.mp3');
myAudio.onloadeddata = audioIsLoaded();
function audioIsLoaded() {
  console.log('audio is loaded');
}

运行下面的代码片段，看看它是如何工作的。

$('#image').load(function() {
  alert('image loaded');
});
var myAudio = new Audio('http://www.mfiles.co.uk/mp3-downloads/edvard-grieg-peer-gynt1-morning-mood.mp3');
myAudio.onloadeddata = audioReady();
function audioReady() {
  alert('audio ready');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" src="http://armpit-wrestling.com/wp-content/uploads/2016/06/bret-hart.jpg">

相关文章：