html5加载效果,html5预加载
如何利用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预加载
网站URL：http://scyanting.com/article/dsggcjj.html
