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

我用css3写了个demo

成都创新互联主营鄢陵网站建设的网络公司,主营网站建设方案,APP应用开发,鄢陵h5重庆小程序开发公司搭建,鄢陵网站营销推广欢迎鄢陵等地区企业咨询

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

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

html5的优点

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

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

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

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

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

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

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

script

document.onreadystatechange=function(){

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

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

}

}

/script

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

HTML5+CSS3做一个手风琴式的加载动画，这动画、这质感、这配色，就问你喜不喜欢？！这个案例的知识点主要是：css的自定义属性 + 动画延迟 + 颜色滤镜（hue-rotate）。

效果：

源码：

分享题目：html5加载效果,html5预加载
浏览地址：http://kswjz.com/article/dsggcjj.html