html5预加载,html5如何支持链接预加载

关于html5的audio标签预加载问题

1.不可能 内核不改不行 等IE9吧2.也许会，某些标签可能会不支持导致错位。

相关问答

Q1: 三个不常见的 HTML5 实用新特性简介

一、DNS

预解析缓存

众所周知，解析

DNS

是网站性能优化的比较重要的一部分，虽然加载时间不太长，但是很难压缩起来。特别是为了并发下载资源而使用多个

CDN

域名来加载资源的大型网站，更不可忽视，每加载资源之前都要先进行

CDN

域名的

DNS

解析转换。

如果采用

DNS

预加载，支持该功能的浏览器就会提前对该域名进行

DNS

解析并且缓存一下，而不会在需要请求资源再进行解析。而且这个功能应用实在是太简单：

复制代码

代码如下:

link

rel="dns-prefetch"

href=""

link

rel="dns-prefetch"

href="//"

淘宝网就应用了这项技术，你可以打开淘宝网，查看源代码，最顶端就把他们的一些

CDN

服务器进行了

DNS

解析缓存。

二、资源预加载

资源预加载有很多办法，例如常见的图片预加载，有采用

CSS

的背景图片来预加载，大部分还是用

JS。目前

HTML5

提供了专门的资源预加载方法，有两个属性：prefetch（预读取）和

prerender（预渲染），分别被

Firefox

和

Chrome

浏览器支持。

1).PREFETCH

预读取

预读取就是很常见的资源预加载，当前页面加载完成之后，就会在后面偷偷的下载你指定的资源，一般是

JS

、CSS

和

图片

这类的，也可以下载页面：

复制代码

代码如下:

link

rel="prefetch"

href=""

/

link

rel="prefetch"

href=""

/

link

rel="prefetch

alternate

stylesheet"

href="mozspecific.css"

/

注意，目前

Firefox

浏览器支持这个功能。

2).PRERENDER

预渲染

这个更厉害了，不仅偷偷的提前下载，而且还给你渲染出来，当用户点击链接的时候，立刻给你展现出来。

复制代码

代码如下:link

rel="prerender"

href=""

/

注意，目前

Chrome

支持这个功能。

搜素引擎其实是最需要这种预读取的功能的，因为他们非常确定用户下一步要打开的页面（搜索结果页面），所以当用户输入搜索内容的时候，就可以提前把搜索结果页面的资源提前加载，而且应用之后，效果十分明显。

目前兼容性是个缺点，貌似只有

Chrome

和

Firefox

支持，而且用的

rel

属性是不同的，如果你想同时兼容两个浏览器，可以写成下面这样：

复制代码

代码如下:link

rel="prefetch

prerender"

href=""

/

此外，当然为了安全没法跨域预加载资源，可能没法用在

CDN

了。

三、Download

属性

HTML5

的

Download

属性用来强制浏览器下载对应文件，而不是打开。Chrome

和

Firefox

等浏览器太过于强大，也许是为了增强用户体验，当用户点击的资源文件可以被它们识别的时候（例如

pdf

会直接在浏览器打开，mp3、mp4

等媒体直接用浏览器内置播放器播放）。但有时候，用户其实是希望直接下载而不是在浏览器上看看，这时就可以加上这个属性，属性值会对下载的文件重命名：

复制代码

代码如下:

a

href="downloadpdf.php"

download="download.pdf"点击直接下载并保存成

download.pdf

文件/a

如果你确定这个资源是用户肯定会下载的，就可以加上这个属性，还可以用

JS

或者手动改变想要保存的文件名。

HTML5

还有很多其他特性，但是看了很长时间书和各种资料，很少见到上面三个又比较实用的属性，拿出来分享一下。

Q2: 如何使用html5？

1、video src="hangge.mp4" controls/video1

2，通过width和height设置视频窗口大小

video src="hangge.mp4" controls width="400" height="300"/video1

3，预加载媒体文件

设置preload不同的属性值，可以告诉浏览器应该怎样加载一个媒体文件：

（1）值为auto：让浏览器自动下载整个文件

（2）值为none：让浏览器不必预先下载文件

（3）值为metadata：让浏览器先获取视频文件开头的数据块，从而足以确定一些基本信息（比如视频的总时长，第一帧图像等）

!-- 用户点击播放才开始下载 --video src="hangge.mp4" controls preload="none"/video12

4，自动播放

（1）使用autoplay属性可以让浏览器加载完视频文件后立即播放。

video src="hangge.mp4" controls autoplay/video1

（2）如果启用自动播放，可以将播放器设置为muted状态。这样自动播放时会静音，防止用户厌烦。用户需要的话可以点击播放器扬声器图标重新打开声音。

video src="hangge.mp4" controls autoplay muted/video1

5，循环播放

使用loop属性让视频播放结束时，再从头开始播放。

video src="hangge.mp4" controls loop/video1

6，设置替换视频的图片（封面图片）

通过poster属性可以设置，浏览器在下面三种情况下会使用这个图片：

（1）视频第一帧未加载完毕

（2）把preload属性设置为none

（3）没有找到指定的视频文件

video src="hangge.mp4" controls poster="hangge.png"/video1

7，浏览器兼容，如何让每一个浏览器都能顺利播放视频

现在大部分浏览器都能支持H.264格式的视频，但Opera浏览器却一直不支持。我们需要通过后备措施保证每个人都能看到视频，通常有下面几种方案：

（1）使用多种视频格式

video和audio元素有个内置的格式后备系统。我们不使用src属性，而是在其内部嵌套一组source元素，浏览器会选择播放第一个它所支持的文件。

我们可以添加WebM格式的视频提供对Opera的支持。

video controls

source src="hangge.mp4" type="video/mp4"

source src="hangge.webm" type="video/webm"

/video1234

（2）添加Flash后备措施（推荐）

上面那个方法不推荐，应为Opera浏览器只占不到1%的份额。特意为它把视频都转码一边太费事。使用Flash作为备用播放方案还是很方便的，同时Flash还能兼容IE8这种连video元素都不支持的老浏览器。

这里使用Flowplayer Flash作为备用播放器（本地下载 ：flowplayer-3.2.18.zip）

video controls

source src="hangge.mp4" type="video/mp4"

source src="hangge.webm" type="video/webm"

object id="flowplayer" width="400" height="300"

data="flowplayer-3.2.18.swf"

type="application/x-shockwave-flash"

param name="movie" value="flowplayer-3.2.18.swf"

param name="flashvars" value='config={"clip":"hangge.mp4"}'

/object

/video1234567891011

（3）也有人优先使用Flash，而HTML5作为后备措施。

这么做是因为Flash普及率比较高，而HTML5作为后备可以扩展iPad和iPhone用户

object id="flowplayer" width="400" height="300" data="flowplayer-3.2.18.swf" type="application/x-shockwave-flash"

param name="movie" value="flowplayer-3.2.18.swf"

param name="flashvars" value='config={"clip":"hangge.mp4"}'

video controls

source src="hangge.mp4" type="video/mp4"

source src="hangge.webm" type="video/webm"

/video

/object

Q3: 在html页面所有音频怎样预加载

audio

preload="" 预先加载

auto:网页打开时自动加载

none：网页打开时不加载音频

metadata:只加载meta信息

Q4: 如何实现HTML5的预加载

!-- 页面，可以使用绝对或者相对路径 -- 

link rel="prefetch" href="page2.html" / 

!-- 图片，也可以是其他类型的文件 -- 

link rel="prefetch" href="sprite.png" /

从上面的HTML代码可以看出，预加载使用 link 标签，并指定 rel="prefetch" 属性，而href属性就是需要预加载的文件路径。而Mozilla还实现了一些类似的 link rel 属性:

link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" / 

link rel="next" href="2.html" /

备注： https 协议也同样支持。

何时需要预加载 

网站是否采用预加载取决于你的需求，下面是一些建议： 

- 如果一系列的页面幻灯片一样展示，那么可以预加载前后各1至3个页面. 

- 加载网站内部通用的图片 

- 在搜索结果页预加载下一页

阻止预加载 

Firefox 允许禁止预加载模式，代码如下： 

user_pref("network.prefetch-next", false);

Q5: android中webview加载html5 怎么实现预加载

你设置了路径后，把webview先隐藏起来，需要的时候再显示不就预加载了