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

时间: 2024-10-11 07:52:53

图片,音频资源预加载和文档dom加载的相关文章

基于用户行为的图片等资源预加载

一.图片的懒加载和预加载 懒加载和本文要提到的预加载实际是不同的概念. 典型的懒加载,例如本博文章的图片,当用户滚动图片进入窗体的时候,才去加载:或者用户点击选项卡,原本隐藏的图片此时再去加载,这个也称之为懒加载. 而预加载则是,用户还没有行为发生,资源已经加载完毕,从这一定义来讲,我们传统图片啪啪啪全部加载完毕,本质上也是预加载,好处就在于,体验好啊,没有泛白或者菊花的出现.不足也很明显,那就是资源可能白白加载了,尤其视频之类的,小明打开bilibili就是来围观广告的,结果,百兆视频巴拉拉魔

前端性能优化 - 资源预加载

转帖: https://css-tricks.com/prefetching-preloading-prebrowsing 当提到前端性能优化时,我们首先会联想到文件的合并.压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标. 资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到. 引用 Patrick Hamann 的解释: 预加载是浏览器对将来可能被使用资源的一种暗示,一些资源可

前端性能优化 – 资源预加载

导语    当提到前端性能优化时,我们首先会联想到文件的合并.压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标. 资源预加载是另一个性能 当提到前端性能优化时,我们首先会联想到文件的合并.压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标. 资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到. 引用 Patr

页面资源预加载(Link prefetch)

不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时间,JavaScript压缩,使用CDN等.我曾经介绍过本站上使用的一些速度优化技术.而在HTML5里,出现了一个新的用来优化网站速度的新功能:页面资源预加载/预读取(Link prefetch). 页面资源预加载/预读取(Link prefetch)是什么?

HTML5页面资源预加载(Link prefetch)功能加速页面加载速度

页面资源预加载/预读取(Link prefetch)是什么?来自MDN的解释: 页面资源预加载(Link prefetch)是浏览器提供的一个技巧,目的是让浏览器在空闲时间下载或预读取一些文档资源,用户在将来将会访问这些资源.一个Web页面可以对浏览器设置一系列的预加载指示,当浏览器加载完当前页面后,它会在后台静悄悄的加载指定的文档,并把它们存储在缓存里.当用户访问到这些预加载的文档后,浏览器能快速的从缓存里提取给用户. 简单说来就是:让浏览器预先加载用户访问当前页后极有可能访问的其他资源(页面

手把手教你构建 Android WebView 的缓存机制 &amp; 资源预加载方案

前言 由于H5具备 开发周期短.灵活性好 的特点,所以现在 Android App大多嵌入了 Android Webview 组件进行 Hybrid 开发 但我知道你一定在烦恼 Android Webview 的性能问题,特别突出的是:加载速度慢 & 消耗流量 今天,我将针对 Android Webview 的性能问题,提出一些有效解决方案. 目录 1. Android WebView 存在什么性能问题? Android WebView 里 H5 页面加载速度慢 耗费流量 下面会详细介绍. 1.

前端资源预加载并展示进度条

我们经常会看到,一些站点在首次进入的时候会先显示一个进度条,等资源加载完毕后再呈现页面,大概像这样: 然后整个页面的操作就会非常流畅,因为之后没必要再等待加载资源了.尤其是在移动端,或者是页游中,这样做能避免页面出现白屏(等待加载图片),很大程度提升用户体验.那这种技术是如何实现的呢?其实非常简单,本文就来从基础细节探究一番. 为什么需要资源预加载 大多时候,我们的页面并不是一次渲染完毕的,而是随着用户的操作,不断修改DOM节点,如果你动态插入了一个图片节点,那么浏览器要马上发一个http请求,

[转]资源预加载

资源预加载可以提升用户体验,如果每次用户打开页面都要加载图片,js,css等资源,会影响用户体验.资源预加载可以一定程度上改善这种情况. 我们可以做的是,但第一个页面load完的时候,在用户阅读网页的空隙,把下一个页面所用的资源提前加载过来cache住,这样下个页面就直接读缓存资源了,这样可以一定程度改善用户体验. 那么预加载资源需要解决的主要问题是JS加载过来不会被直接执行,css加载过来不会更改页面样式. 这样就会产生很多方案, 这里介绍一种不错的兼容方案: 1. IE下用new Image

关于cocos2d-x 与 cocos2d-html5 资源预加载的思考

移动端资源预加载,可以做到需要加载的时候,从本地磁盘加载到内存,当纹理不需要的时候,都是强制清理内存里的纹理占用: cc.TextureCache.getInstance().removeAllTextures(); cc.TextureCache.getInstance().dumpCachedTextureInfo();//test 打印仍然在使用的纹理 cc.TextureCache.purgeSharedTextureCache(); cc.SpriteFrameCache.getIns