给页面加上Loading效果最简单实用的办法
2010-11-09 23:50
393 查看
其实我的方法非常简单,也可以说没什么技术含量,甚至还不支持IE6,但据我长期的观察,确实非常实用的。Analytics的统计数据表明,加入了这一效果之后,用户的“平均停留时间”的确有所提高。可见,一个“正在加载”让许多用户都有更多的耐心等待,而不会因为屏幕空白太久而不耐烦地离开。
最近,又有不少朋友留言询问这个Loading的实现原理。这里我就分享一下:
首先,在页面的最上部输出一个Loading文字,比如“正在加载”,用div标签包含,并给它一个id,比如loading:
你可以直接放到页面的<body>标签后面,亦可以用script.write输出(如果你有SEO洁癖的话)
然后,在你的样式表中,对这个loading设定一个简单的样式:
接下来,在你<body>标签闭合之前,将这个loading隐藏掉就可以了。最简单的方法是输出一段<style>标记:
如果你有jQuery之类的JavaScript库,就更方便了,例如jQuery可以使用:
这样,当页面完全加载完毕之后,loading就隐掉了。
对于WordPress博客,如果你对页面代码没有太苛刻的洁癖,我个人建议把一些重量的JavaScript库都放到这段loading之后引入。这样在浏览器端,你的“Loading”会飞快地出现,用户会觉得你的服务器响应非常迅速。然而,如果你从各种不同的域名下先加载几百kb的JavaScript库,估计用户在你的“Loading”出现之前就已经关闭页面了。
最后,希望这个老土的技巧能帮到你:)
最近,又有不少朋友留言询问这个Loading的实现原理。这里我就分享一下:
首先,在页面的最上部输出一个Loading文字,比如“正在加载”,用div标签包含,并给它一个id,比如loading:
<body> <div id='loading'>正在加载</div>
你可以直接放到页面的<body>标签后面,亦可以用script.write输出(如果你有SEO洁癖的话)
然后,在你的样式表中,对这个loading设定一个简单的样式:
#loading{z-index:1;padding:5px 0 5px 9px;background:#c44;left:0;top:0;width:90px;color:#fff;position:fixed}
接下来,在你<body>标签闭合之前,将这个loading隐藏掉就可以了。最简单的方法是输出一段<style>标记:
<script>document.write('<style>#loading{display:none}<\/style>');</script></body>
如果你有jQuery之类的JavaScript库,就更方便了,例如jQuery可以使用:
<script>$('#loading').hide()</script></body>
这样,当页面完全加载完毕之后,loading就隐掉了。
对于WordPress博客,如果你对页面代码没有太苛刻的洁癖,我个人建议把一些重量的JavaScript库都放到这段loading之后引入。这样在浏览器端,你的“Loading”会飞快地出现,用户会觉得你的服务器响应非常迅速。然而,如果你从各种不同的域名下先加载几百kb的JavaScript库,估计用户在你的“Loading”出现之前就已经关闭页面了。
最后,希望这个老土的技巧能帮到你:)
相关文章推荐
- 给页面加上Loading效果最简单实用的办法
- (转) 页面loading阴影效果
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。
- 非常简单的固定页面头(比如导航栏)的小例子(Jquery模拟生成系列元素辅助查看效果)!
- [分享] 页面加载(loading)效果兼超时提示
- css3简单实现页面中出现雪花飘落效果
- HTMl与CSS简单页面页面效果实例
- jquery制作一个简单的loading--页面参数传递
- 爱分享 jquery 简单实用的无缝滚动效果
- 几种常见的载入中、loading页面效果的实现方法总结
- 一款非常简单酷炫的LoadingView动画效果
- 页面加载顺序问题,影响视觉效果,使用loading解决。
- 实现随页面滚动的层(最简单效果)
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- 简单快速开发C\S架构程序用最简单的不分层最快的效率达到功能要求的例子程序FrmUserEdit 添加评论功能页面效果
- 页面加载时的 Loading 效果
- 一个基于jquery的页面预载入效果(loading)
- 简单实用的自动图片动态切换(无渐变效果)
- 请写一个简单的幻灯效果页面,不使用JS来完成怎么做
- 几个简单实用的css效果