[英]Execute function only when images/sounds are loaded, Jquery
当窗口/文档已经加载时,我会动态设置图像和音频源,例如,我在用户对页面执行一些操作后设置它们:
// 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').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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.