在主题中添加 Loading 加载效果
前些天我在 Aw 博客上看到了 Loading 加载效果, 据说加个 “Loading” 效果会降低网站跳出率, 提高平均停留时间. 具体效果是不得而知, 不过从用户体验来说, 它在一定程度上缓解了访客等待载入的枯燥感,而不会因为屏幕空白太久而不耐烦地离开. 况且, 添加这个效果实在是太简单了.
1. 加载 loading 效果
在 <body> 标签起始位置放置以下代码: (一般在主题 header.php 中可以找到.)
1 2 3 | ... <body> <div id="loading"><div></div></div> |
如果还想加些文字的话, 可以这么写:
1 2 3 | ... <body> <div id="loading">Loading...</div> |
2. 在 style.css 中添加 Loading 样式代码
下载 loading.gif 文件, 并将文件放置到 img 目录中, 在 style.css 添加下列 CSS 代码.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /* loading START */ #loading { BACKGROUND-REPEAT:no-repeat; BACKGROUND-POSITION:center center } #loading { BORDER-BOTTOM:#d7f6d7 2px solid; BORDER-LEFT:#d7f6d7 2px solid; BACKGROUND-COLOR:#ebfbeb; BORDER-TOP:#d7f6d7 2px solid; BORDER-RIGHT:#d7f6d7 2px solid } #loading { BACKGROUND-IMAGE:url(img/loading.gif); Z-INDEX:3; POSITION:fixed; WIDTH:113px; HEIGHT:23px; MARGIN-LEFT:-440px; TOP:13px; LEFT:50% } /* loading END */ |
3. 页面载入完毕后隐藏代码
在 <body> 标签闭合之前，将这个 loading 隐藏掉, 最简单的方法是输出一段 <style> 标记:
1 2 | <script>document.write('<style>#loading{display:none}<\/style>');</script> </body> |
如果你有 jQuery 之类的 JavaScript 库, 就更方便了, 例如 jQuery 可以使用:
1 | <script>$('#loading').hide()</script></body> |
这样, 当页面完全加载完毕之后, loading 就隐掉了.
对于 WordPress 博客, 如果你对页面代码没有太苛刻的洁癖, 我个人建议把一些重量的 JavaScript 库都放到这段 loading 之后引入. 这样在浏览器端, 你的 Loading 会飞快地出现, 用户会觉得你的服务器响应非常迅速. 然而, 如果你从各种不同的域名下先加载几百kb的 JavaScript 库, 估计用户在你的 Loading 出现之前就已经关闭页面了.
如果你对 在主题中添加 Loading 加载效果 有什么意见和建议，欢迎留言指出.
参考资料: Aw Blog, Shawn Blog.
試試。感覺很有趣 
路过，暂时还用不到，哈哈。
ps，修改后的inove比原来的好看，改天俺也去试试。。。
@蛋王
审美观点不同, mg12 考虑大众化, 更是国际化, 呵呵.
good!!!!我喜欢～
@skun
