在项目中遇到一个问题,ajax请求音频资源,然后动态的插入到文档中,其中。原生的音频外观实在太丑了,而且每个浏览器的样式都不一样,采取了一个audio插件。
就遇到一个问题,请求后的直接调用插件的话,资源还没有被加载,无法获取音频的总长度,所以调用后时间会显示nun;
处理的思路就是--等待音频资源加载完成后执行插件调用函数
<---图片资源-->function loadSprites(src) { var deferred = $.Deferred(); var sprite = new Image(); sprite.onload = function() { deferred.resolve(); }; sprite.src = src; return deferred.promise(); } <--音频资源--> function loadAudios(src) { var deferred = $.Deferred(); var audio = new Audio(src); audio.onloadedmetadata = function() { deferred.resolve(); }; audio.src = src; return deferred.promise(); } //怎么用 var loaders = []; loaders.push(loadSprites(img1Url)); loaders.push(loadAudios(audioUrl)); $.when.apply(null, loaders).done(function() { $(‘#img1‘).attr("src",img1Url); $(‘#music‘).attr("src",audioUrl); });
这种的方法是判断文档加载完成,加载完成执行函数
document.onreadystatechange = showAudiodata;
function showAudiodata(){
if(document.readyState == "complete") {//当页面加载状态
$(‘audio‘).css(‘visibility‘,‘visible‘);
$(‘audio‘).mediaelementplayer({
features: [‘playpause‘,‘progress‘,‘duration‘],
audioWidth: 160,
audioHeight: 30
});
}
}
时间: 2024-10-11 07:52:53