大猫的无限游戏

(无修正)给页面加Loading

大家先来跟我学一个单词

那就是传说中的[無修正]!

跟着老师念: mo xiu sei (拼音第一声)

好,接下来我要对阿呜(aw)同学的那篇给页面加上Loading效果最简单实用的办法做一下修正

阿呜的方法系酱紫滴
建立一个div,一个css,一个js
div就素那一坨字

 
假装在异步加载ing...

css就素那一抹红

#loading{
	z-index:1;
	padding:5px 0 5px 9px;
	background:#c44;
	left:0;
	top:0;
	width:90px;
	color:#fff;
	position:fixed;
}

js让丫消失(用的jquery框架,推荐大家使用)

大猫同学进行了再一次的艺术加工处理
原html没啥子缺点,文案要改的话自由发挥
原css缺点:ie6不支持的position:fixed,再说ie也不支持圆角
考虑js去fixed成本太高,这里推荐加上float属性
原因是如果loading和大猫一样是竖着来的,不float会很挫
假若横着,float了也不错

#loading {
	-moz-border-radius-bottomright:5px;/* FF专用圆角属性 */
	float:left;/* 横竖都不挫 */
	width:26px; /* 如果你也想盲目跟风就修改width和height和padding */
}

原js消失方式是突然来那么一下
身为一枚老师,是绝对不允许早x的
so
这里采用了jquery.hide的参数slow(ie6下效果尤佳)

具体写法可以参照俺的common.js
jquery真是所有男人的福音啊

已发布

分类

作者：

bigCat

标签

, , ,

评论

《“(无修正)给页面加Loading”》 有 97 条评论

  1. QQ个性签名 的头像
    QQ个性签名

    ❗ 收藏了！谢谢喽

    回复
  2. 繁体字转换 的头像
    繁体字转换

    ❗

    回复
  3. Leo 的头像
    Leo

    假装没有看到并飘过ing…… 😉

    回复
    1. Enson 的头像
      Enson

      @Leo, 我也假装没有看到并飘过ing…… 😈

      回复
      1. BigCat 的头像
        BigCat

        @Enson, 假装没有写过并飘过ing… 😯

        回复
  4. sogoo 的头像
    sogoo

    aw那是只见loading，不见页，半天没动静；
    你这是只见页面，不见loading，标示一闪而过…

    回复
    1. BigCat 的头像
      BigCat

      @sogoo, 我代码多摩多摩的简洁…当代码加载完了后就hide掉loading了…
      挖哈哈

      回复
  5. blankyao 的头像
    blankyao

    jjjjjjquery ❗

    回复
  6. 达达 的头像
    达达

    为虾么jQuery是男人的福音咧？不是女人的福音咧？莫灰prototype,aculo.script.us……才素？ 😛

    回复
    1. BigCat 的头像
      BigCat

      @达达, 因为没有内涵不要紧,方便又好用就成,这话不是在说prototype…

      回复
  7. zylew 的头像
    zylew

    无视加载框，哇咔咔

    回复
    1. BigCat 的头像
      BigCat

      @zylew, 光纤? ❗

      回复
      1. zylew 的头像
        zylew

        @BigCat,不对，比光纤还猛

        回复
        1. BigCat 的头像
          BigCat

          @zylew, 😯 直接机房拉网线?

          回复
          1. zylew 的头像
            zylew

            @BigCat, 说的差不多了，其实我正在用你的服务器上网，哇咔咔

            回复
  8. geuro 的头像
    geuro

    效果看起来很不错。

    回复
    1. BigCat 的头像
      BigCat

      @geuro, 就是多了坨无用标签… ❓

      回复
  9. 小墨 的头像
    小墨

    不过
    还是竖着的，为了看这个我ctrl+F5了一下

    回复
    1. BigCat 的头像
      BigCat

      @小墨, ❓ 看来大家网速都不错嘛

      回复
    2. Nickname ( required ) 的头像
      Nickname ( required )

      一天天

      回复
  10. 鬼火 的头像
    鬼火

    在opera下有点问题

    回复
    1. bigCat 的头像
      bigCat

      @鬼火, 😳 我用9.X的opera没看出啥子问题来呀….

      回复
      1. 鬼火 的头像
        鬼火

        @bigCat, 有图有真相

        http://www.404cn.net/blog/attachment/200811/1227832824_33801bc1.jpg

        回复
        1. BigCat 的头像
          BigCat

          @鬼火, 😮 你说点点点溢出啊…
          故意的…
          因为标准的话是不拆分单词或连续字符串的
          残缺美嘛

          回复
  11. Elton Disney 的头像
    Elton Disney

    呃～就凭你最后那句话，我决定了要学jquery～～

    回复
    1. BigCat 的头像
      BigCat

      @Elton Disney, 这玩意儿绝对会和windows一样流行
      为啥我不说linux流行?因为linux很专业…

      回复
  12. xiaorsz 的头像
    xiaorsz

    ❗ 貌似将DIV 放进

    $(document).ready(function() {}

    里一句话搞定！！ 😛

    回复
    1. BigCat 的头像
      BigCat

      @xiaorsz, 这样子…不是还没出来就被干掉了…要保证div在第一时间加载吧..
      也试过$(“#bgcontain”).append(“div id=loading 假装在异步加载ing …/div”);
      似乎不行…

      回复
  13. 老孔 的头像
    老孔

    偷偷加上，假装没看见ing

    回复
    1. 老孔 的头像
      老孔

      @老孔, 我没搞好。 😮

      回复
  14. fisio 的头像
    fisio

    来过

    回复
  15. 阿企 的头像
    阿企

    请问大猫大牛，为什么要加这个效果类？浏览器本身下方状态栏难道不是有提示正在加载吗？

    回复
    1. BigCat 的头像
      BigCat

      @阿企, 这个得问gmail为啥子要加了
      偶等都素盲目跟风之人

      回复
      1. 阿企 的头像
        阿企

        @BigCat, gmail那个还好吧，这个世界上最复杂的网络邮箱页面在完全加载之前给个白屏，显得简洁；blog这样子就不简洁了，我觉得是这样的，呵呵。

        回复
        1. BigCat 的头像
          BigCat

          @阿企, 早先gmail是有的… …

          回复
  16. vampire 的头像
    vampire

    还要强调最后一个script应该放到body末尾吧
    一直很喜欢jQuery 体积小效率高使用方便 就是代码太TM难读了

    回复
    1. BigCat 的头像
      BigCat

      @vampire, 恩,我吧jquery库和自己的common.js都丢在footer

      回复
    2. BigCat 的头像
      BigCat

      @vampire, 不对,.ready()就是加载所有代码后再执行 onload是加载所有内容
      所以无所谓前后
      丢后面的真正原因是库太大,要内容先显示才好…

      回复
  17. aw 的头像
    aw

    男人！~~-。-

    快支持Gravatar吧：）

    回复
    1. BigCat 的头像
      BigCat

      @aw, 😮 早加上了,不过后来发现bluehost的空间极慢,于是能精简的都精简…注释掉了gravatar 🙁

      回复
  18. 武斌 的头像
    武斌

    博主这个做的很牛X啊，还有淡出缩小的效果，不过那个ing…超出了红色的范围。IE不支持圆角。

    回复
    1. BigCat 的头像
      BigCat

      @武斌, 正常浏览器不支持连续字符换行…于是加了个空格..

      回复
  19. 菠菜 的头像
    菠菜

    这么技术的文章你也能写的那么银当！

    牛！ ❗

    回复
    1. zing 的头像
      zing

      @菠菜,

      强烈+1

      回复
      1. BigCat 的头像
        BigCat

        @zing, 💡 总分几分…

        回复
  20. 就去干 的头像
    就去干

    不限支持@#顶啊@##

    回复
  21. homer 的头像
    homer

    哇 一看见代码就等于看见了高科技了
    ～～～

    回复
    1. BigCat 的头像
      BigCat

      @homer, 高科技

      回复
  22. 飞鱼 的头像
    飞鱼

    😮 高级“

    回复
    1. BigCat 的头像
      BigCat

      @飞鱼, 😉 雕虫小技…

      回复
  23. yuki 的头像
    yuki

    你什么时候换宽屏的版啊。。。 😡

    回复
    1. BigCat 的头像
      BigCat

      @yuki, – -后来想想还是这个小版面比较舒服… ❓

      回复
  24. tracy 的头像
    tracy

    我上了他了，修改了position属性，绝对定位。

    回复
    1. BigCat 的头像
      BigCat

      @tracy, 哈,这样子虽然不会随着页面一起跑,至少各个浏览器统一了

      回复
  25. 2233 的头像
    2233

    🙁

    回复
  26. jk 的头像
    jk

    @BigCat 想知道你文中嵌入的插件！

    回复
    1. BigCat 的头像
      BigCat

      @jk, http://wordpress.org/extend/plugins/wp-syntax/
      check this out

      回复
  27. 易水寒 的头像
    易水寒

    加载…

    你应该写个焦急缓冲的js..

    回复
    1. bigCat 的头像
      bigCat

      @易水寒, 焦急缓冲?…高端词汇?

      回复
  28. 蓝天博客 的头像
    蓝天博客

    学习。以前阿里的同事。幸会！

    回复
    1. bigCat 的头像
      bigCat

      @蓝天博客, 🙂 握手握手~~

      回复
  29. mr wu 的头像
    mr wu

    模板很漂亮，请教个问题，我用了coolcode插件，但是我的代码样式还是不对头。不知道什么原因。
    这是我用了代码的页面，请帮我看看。谢谢了
    http://18tvb.com/wordpress-to-the-editor-of-the-add-button-coolcode.html

    回复
    1. BigCat 的头像
      BigCat

      @mr wu, 🙄 介个,在加入代码的时候要用pre包含,然后定义属性lang=”javascript”,如果需要行号,还需要加入起始行号line=”1″
      是按照说明书走的么?

      回复
  30. 猫 的头像
    猫

    😈 大猫同学，N久不见。你的博客更加法力无限，无与伦比，出神入化了。。。
    俺是wusuowei同事，还记得不？

    回复
    1. bigCat 的头像
      bigCat

      @猫, 😮 ,无老师好,现在偶也是一枚老师了…过瘾…
      现在在哪里捏?都米消息了..
      不过偶也忙的不行

      回复
  31. 小墨 的头像
    小墨

    现在想想还是放在边上好~~ 😯
    有空把自己的改到边上去~ 😛

    回复
    1. bigCat 的头像
      bigCat

      @小墨, 🙂 个人爱好不一样

      回复
  32. anothr user

    Anothr feed track -大猫爪 BigCat’s Paw…

    One new subscriber from Anothr Alerts…

    回复
  33. g.zhen.ning 的头像
    g.zhen.ning

    很棒

    回复
  34. gowers 的头像
    gowers

    猫啊，你那个上面的图片很有意思啊，还有个办证～哈哈

    回复
    1. bigCat 的头像
      bigCat

      @gowers, 😆 听花花说他在武林广场上看到一只流浪狗,头顶一纸条
      办证

      回复
  35. China_Y 的头像
    China_Y

    404那家伙原来在这里偷的 😛

    回复
    1. BigCat 的头像
      BigCat

      @China_Y, 那个图?不是我画的啦,也是网上搞的哈

      回复
  36. 的头像
    匿名

    😳 😮 🙁 😡

    回复
  37. David 的头像
    David

    太有才了，可我还是不会用。。。能不能写个傻瓜版的 😮

    回复
    1. BigCat 的头像
      BigCat

      @David, 😯 aw同学那篇写的比较通俗点..基本上就是丢个样式在style.css ,丢个div在body最前,丢个js在body最后

      回复
      1. David 的头像
        David

        @BigCat, 我去cc 😮

        回复
  38. 世纪之光 的头像
    世纪之光

    好漂亮的皮肤，能共享吗？大猫同志。

    回复
    1. BigCat 的头像
      BigCat

      @世纪之光, 😳 这款皮肤基于mayabox v1修改的,而且修改了太多…以至于都不能直接拿出来分享…最近每天加班.等有时间的时候整理下发出来:)
      可以先去用mayabox v1凑合…虽然好多问题..N年的老主题了

      回复
      1. 世纪之光 的头像
        世纪之光

        @BigCat, 真的是相当不错，我先去看看
        mayabox v1

        回复
  39. caixiaoeva 的头像
    caixiaoeva

    我发现我的网站在你这里总是风雨飘摇，不定什么时候就不见了。。。 😯

    回复
    1. BigCat 的头像
      BigCat

      @caixiaoeva, 😳 ?不是蹲在右边么…

      回复
  40. 老孔 的头像
    老孔

    大猫最近很忙啊 😆

    回复
    1. BigCat 的头像
      BigCat

      @老孔, 🙁 日夜加班…

      回复
  41. Elton Disney 的头像
    Elton Disney

    为虾米大猫这么久都米有更新了？
    难道说是结婚了？

    回复
    1. 世纪之光 的头像
      世纪之光

      @Elton Disney, 跟他结婚的大母猫？

      回复
      1. Elton Disney 的头像
        Elton Disney

        @世纪之光, 很有可能～～
        嗯嗯

        回复
    2. BigCat 的头像
      BigCat

      @Elton Disney, 🙁 日夜加班…

      回复
  42. stranger 的头像
    stranger

    ❗ 收下了，谢谢大猫～

    回复
  43. qn 的头像
    qn

    不错，正想找这个 谢谢猫猫

    回复
  44. jQuery(添加页面载入进度条 | MOPVHS's Blog

    […] 本站的loading效果所用的一排loading.gif小图标是从大猫 […]

    回复
  45. jucelin 的头像
    jucelin

    贵站域名很NB，呵呵 😆

    回复
    1. bigCat 的头像
      bigCat

      @jucelin, NB域名很贵,呜呜 🙁

      回复
  46. 囧啊囧 的头像
    囧啊囧

    好吧！老师，这文章很帅，就是不知道从何下手，对菜鸟来说和天书差不多啊！ ❓

    回复
    1. bigCat 的头像
      bigCat

      @囧啊囧, 自学成才啊同学

      回复
  47. 给博客加上“正在加载”的提示信息 | 囧啊囧(vv15.com)

    […] 给博客加上“正在加载”的提示信息 Posted on 2010-12-05 by fountain in 电脑&技巧 Leave a comment 分享 | 此文效果见本博页面左上角的“正在加载”那几个字，方法来自阿瓦的家和大猫，灰常感谢大猫老师的指教，下面做个备份以供自己和代码菜鸟朋友参考使用。 […]

    回复
  48. 长岛冰泪 的头像
    长岛冰泪

    男人的福音啊，女人怎么办呢

    回复

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注