Picture, audio resource preload and document DOM loading

When you encounter a problem in the project, AJAX requests an audio resource and then dynamically inserts it into the document. The native audio looks really ugly, and each browser has a different style, taking an audio plugin.

Encountered a problem, the request after the direct call plug-in, the resource has not been loaded, unable to get the total length of audio, so after the call time will show nun;

The idea of processing is to wait for the audio resource to execute the plug-in call function after the load is completed

<---picture Resources-
function Loadsprites (src) {  var deferred = $. Deferred ();  var sprite = new Image ();  Sprite.onload = function () {   deferred.resolve ();  };  SPRITE.SRC = src;  return Deferred.promise ();} <--Audio Resource-->function Loadaudios (src) {  var deferred = $. Deferred ();  var audio = new Audio (SRC);  Audio.onloadedmetadata = function () {    deferred.resolve ();  };  AUDIO.SRC = src;  return Deferred.promise ();} How to use var loaders = [];loaders.push (Loadsprites (Img1url)); Loaders.push (Loadaudios (Audiourl)); $.when.apply (NULL, Loaders). Done (function () {  $ (' #img1 '). attr ("src", img1url);  $ (' #music '). attr ("src", Audiourl);});

This method is to determine the completion of the document loading, loading the execution function

Document.onreadystatechange = Showaudiodata;
function Showaudiodata () {
if (document.readystate = = "complete") {//when page load status
$ (' audio '). CSS (' visibility ', ' visible ');
$ (' audio '). MediaElementPlayer ({
Features: [' playpause ', ' Progress ', ' duration '],
audiowidth:160,
Audioheight:30
});
}
}

Picture, audio resource preload and document DOM loading