圖片，音頻資源預加載和文檔dom加載

在項目中遇到一個問題，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
　　});
 }
}