图片，音频资源预加载和文档dom加载

Posted 2020-08-09 jquery37

在项目中遇到一个问题，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
　　});
}
}