html5加载效果,html5预加载

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

如何利用html5制作出loading加载效果

我用css3写了个demo

html

head

meta charset="utf-8"/

titleLoading/title

style

.spinner {

margin: 100px auto;

width: 60px;

height: 60px;

text-align: center;

font-size: 10px;

}

.spinner div {

background-color: #67CF22;

height: 100%;

width: 6px;

display: inline-block;

-webkit-animation: stretchdelay 1.2s infinite ease-in-out;

animation: stretchdelay 1.2s infinite ease-in-out;

}

.spinner .rect2 {

-webkit-animation-delay: -1.1s;

animation-delay: -1.1s;

}

.spinner .rect3 {

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}

.spinner .rect4 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

.spinner .rect5 {

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}

@-webkit-keyframes stretchdelay {

0%, 40%, 100% { -webkit-transform: scaleY(0.4) }

20% { -webkit-transform: scaleY(1.0) }

}

@keyframes stretchdelay {

0%, 40%, 100% {

transform: scaleY(0.4);

-webkit-transform: scaleY(0.4);

} 20% {

transform: scaleY(1.0);

-webkit-transform: scaleY(1.0);

}

/style

/head

body

div class="spinner"

div class="rect1"/div

div class="rect2"/div

div class="rect3"/div

div class="rect4"/div

div class="rect5"/div

/div

/body

/html

相关问答

Q1: 如何实现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);

Q2: html5的优点

HTML5为什么如此受欢迎？主要因为它本身的优势。HTML5的主要优势如下：

1、基于HTML5强大的兼容性。因为HTML5提供了前所未有的数据与应用接入开放接口，使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联，就因为这种强大的兼容性，使得在当下开发界是如此的火，同样也是因为这强大的兼容性，使得手机应用软件，app更适合，也更方便。所以更适合手机app软件开发，正好补充了手机小巧的不足。

2、HTML5开发支持的手机系统有android、ios。

3、HTML5其突出的特点就是强化了web页的表现性,追加了本地数据库，可以用作离线应用的开发，离线应用就是把需要的资源先缓存到本地，下次再查看时无需联网。

4、HTML5开发能提供更快、更简便的服务，代码可高度重用，服务发布方便。

5、动画、游戏动态效果，地理定位等很多app应用正在崛起，而HTML5技术的强大优势就是这种让我们惊叹的效果。而未来采用HTML5开发app的，将会大量减少代码量，应用软件也会得到更高的用户体验，更好的视觉效果。

Q3: 如何利用HTML5实现等待加载动画的效果

script

document.onreadystatechange=function(){

if(document.readyState=='complete'){

$('.loading').fadeOut();

}

/script

Q4: HTML5+CSS3小实例：手风琴式加载动画