图片，音频资源预加载和文档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);

});

这种的方法是判断文档加载完成，加载完成执行函数

秒客网

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

相关文章