给博客页面加Loading效果

据说加个Loading效果会降低网站跳出率，提高平均停留时间。具体效果是不得而知，不过从用户体验来说，页面上有个loading过程比单纯的空白页面要好得多。况且，添加这个效果实在是太简单了。^_^

请移步Awflasher.com查看详细教程：给页面加上Loading效果最简单实用的办法

不过他给出的方法是没有gif动态图片的，我自己的稍微修改了一下，我的代码如下：
Header.php里面的蓝色字体代码，注意loading图片的地址根据你自己主题而定。图片也要自己找一个^^

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

<div id=’loading’>正在加载……

<IMG alt=”" src=”http://www.yourdomain.com/wp-content/themes/yourtheme/images/loading.gif”>

</div>

<title><?php wp_title(); ?> | 小墨|博客</title>

CSS代码也稍微不同：

#loading{z-index:2;position:fixed;top:50%;left:50%;margin-top:-9px;margin-left:-56px;background:#cecece;width:120px;font-size:18px}

footer.php里面代码是一样的

<script>document.write(‘<style>#loading{display:none}<\/style>’);</script>
</body>

Ok了~不过要是你网速快的没准都注意不到它的存在，如果没看清楚，可劲按Ctrl+F5

十一月 20th, 2008 | in 博客技巧 | Tagged
Both comments and trackbacks are currently closed.
29 Comments
  1. 2008.11.20 at 13:23 Notify

    很好,我网速很快,看不到效果~
    谢谢提供哈~

  2. 2008.11.20 at 13:23 Notify

    很多人都不喜欢Loading在中间…包括我…

    如果Loading一直持续10秒的话…会影响阅读已经加载好的页面…

  3. 2008.11.20 at 13:38 Notify

    我的是爪爪，但是真的等的太久我就会没有耐心。

  4. 2008.11.20 at 13:54 Notify

    我喜欢loading，不过，不加，哈哈，等我想好一个漂亮的方法再加。

  5. 2008.11.20 at 14:27 Notify

    您的页面速度还不错，没必要添加这个效果的，呵呵。

    P.S：评论提交按钮字体颜色修改一下较好。

  6. 2008.11.20 at 14:54 Notify

    如果你的代码很多人用，这样会导致你的带宽很紧张哦^_^

  7. 2008.11.20 at 15:01 Notify

    这个 loading 实在太快了，哈哈

  8. 2008.11.20 at 15:05 Notify

    @NetPuter:客气~
    @Chada: 的确是，现在这个主机速度还是相当可以的。按钮的确很丑，上次改评论时匆匆弄的，多谢提醒
    @sofish:期待你有好的创意，嘿嘿~

  9. 2008.11.20 at 15:09 Notify

    @leehow:知道吗，我的css代码就是从你那偷的，因为不知道怎么把loading框放到中间来。hiahia。你的博客主题很有意思
    @Mao:主要是考虑辛苦添加这么个东西要醒目点@@~哈哈，其实可以拉动滚动条，不会遮住内容的啦。不过你说的也有道理，有时网速实在慢的时候看到这个loading会很恼火
    @Aw: 我的博客访问量不怎么样，应该不会消耗很多。不过还是改掉吧。多谢提醒
    @Shawn:其实用处不是很大，不过很好玩^^

  10. 2008.11.20 at 16:07 Notify

    可以自定义图片啊，不错，周末试试，呵呵

  11. 2008.11.20 at 16:21 Notify

    @sofish:严重支持 我就不折腾了…哈哈

  12. 2008.11.20 at 16:31 Notify

    效果不错~~收藏先

  13. 2008.11.20 at 16:56 Notify

    很不错 第一次看到 等会尝试

  14. 2008.11.20 at 20:41 Notify

    呵呵，学习。。。

  15. 2008.11.20 at 21:24 Notify

    效果不错，我也打算找一个好的jif图片加到我博客的loading上。。

  16. 2008.11.21 at 01:03 Notify

    这个实用啊，谢谢、

  17. 2008.11.21 at 12:36 Notify

    @all: @Stephen:呵呵，感觉加个图片生动点

  18. 2008.11.21 at 18:33 Notify

    降低网站跳出率?嘛意思

  19. 2008.11.21 at 18:47 Notify

    默默， 你觉得我的要不要用，自己感觉速度还能接受，但是人家怎么想我就不知道了！

  20. 2008.11.21 at 19:29 Notify

    你页面速度挺快的，几乎看不到！！呵呵！

  21. 2008.11.21 at 19:30 Notify

    你现在实现ajax留言了！？

  22. 2008.11.22 at 14:35 Notify

    @laoliu: 跳出率就是指访客进你博客马上又关掉了~没继续浏览
    @LoveBlogEarn: 我感觉还是加一个比较好~速度这东西不一定的，我这边电信访问着不是特别快~
    @xiaorsz: Ajax 是实现了，不过还有很多问题，没有滑动滑出，感觉很生硬。。

  23. 2008.11.23 at 14:32 Notify

    我的博客都是分部分显示的，因为可能一些脚本调用其它网站的时候需要时间加载，这个Loading有时可能没多少用。不过，显得人性化一些。

  24. 2008.11.24 at 05:56 Notify

    是啊，我访问你网站的速度很快啊，基本上loading都是一下子，没看得清呢。

  25. 2008.11.25 at 15:39 Notify

    @Eden:@Jinwen:
    呵呵 是以备不时之需的，不管什么主机都有抽风的时候，访客的网速也不得不考虑~我认为加个loading条还是有必要的^^

  26. 2008.11.25 at 23:53 Notify

    看到效果了，平均来说加载还是很快的，几乎没有多久的停顿时间。
    空间好，吃饭都香，呵呵～

  27. 2008.11.26 at 22:59 Notify

    好方法，俺也用了，不过我不喜欢用图片，就用AW的原来代码就挺好的！我很喜欢那个红底loading

  28. 2008.11.30 at 16:28 Notify

    速度太慢加这个还是不错

  29. 网络基础知识
    2009.06.09 at 23:19 Notify

    主题漂亮的很

2 Trackbacks

  1. By 天气凉了 - 又感冒了 -css圆角 WordPress博客修改 | 小墨|博客 on 2008.11.23 at 16:54

    [...] 这几天虽然没有更新文章，也没闲着，其实都在修改博客主题：比如给博客添加loading效果，加大文章后面Google AdSense广告然后把相关文章放到下面，修改顶部RSS Feed样式，一些地方圆角处理，css细节修改等等。 [...]

  2. By 探奇启思集 » 51|gadget|新奇创意设计 » 推荐几个博客主题设计素材在线制作网站 on 2008.11.26 at 12:41

    [...]  由于本博使用了较多脚本，加载起来时间偏长。看到小墨修改过的给博客页面加Loading效果一文，就试着也做一个动画效果。小墨没有提供动态加载的gif图，咱就上网自己搜。很巧找到了下面这个84 Bytes的博客，里面有篇文章介绍了两个很方便设计Loading图片的网站，同时还介绍了制作按钮、背景等等一些相关主题设计的网站，不知道有没其它博客介绍，我是觉得比较有用就推荐一下。 [...]

↑ Top

↓ Bottom