大猫 (Madao) - まるでダメなおっさん

(无修正)给页面加Loading

by bigCat 96 Comments

大家先来跟我学一个单词

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

跟着老师念: 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真是所有男人的福音啊

Comments ( 96 )

  1. ReplyQQ个性签名
    :!: 收藏了!谢谢喽
  2. Reply繁体字转换
    :!:
  3. ReplyLeo
    假装没有看到并飘过ing…… ;)
    • ReplyEnson
      @Leo, 我也假装没有看到并飘过ing…… :twisted:
      • ReplyBigCat
        @Enson, 假装没有写过并飘过ing... 8O
  4. Replysogoo
    aw那是只见loading,不见页,半天没动静; 你这是只见页面,不见loading,标示一闪而过...
    • ReplyBigCat
      @sogoo, 我代码多摩多摩的简洁...当代码加载完了后就hide掉loading了... 挖哈哈
  5. Replyblankyao
    jjjjjjquery :!:
  6. Reply达达
    为虾么jQuery是男人的福音咧?不是女人的福音咧?莫灰prototype,aculo.script.us……才素? :P
    • ReplyBigCat
      @达达, 因为没有内涵不要紧,方便又好用就成,这话不是在说prototype...
  7. Replyzylew
    无视加载框,哇咔咔
    • ReplyBigCat
      @zylew, 光纤? :!:
      • Replyzylew
        @BigCat,不对,比光纤还猛
        • ReplyBigCat
          @zylew, 8O 直接机房拉网线?
          • Replyzylew
            @BigCat, 说的差不多了,其实我正在用你的服务器上网,哇咔咔
  8. Replygeuro
    效果看起来很不错。
    • ReplyBigCat
      @geuro, 就是多了坨无用标签... :?:
  9. Reply小墨
    不过 还是竖着的,为了看这个我ctrl+F5了一下
    • ReplyBigCat
      @小墨, :?: 看来大家网速都不错嘛
  10. Reply鬼火
    在opera下有点问题
    • ReplybigCat
      @鬼火, :oops: 我用9.X的opera没看出啥子问题来呀....
      • Reply鬼火
        @bigCat, 有图有真相 http://www.404cn.net/blog/attachment/200811/1227832824_33801bc1.jpg
        • ReplyBigCat
          @鬼火, :o 你说点点点溢出啊... 故意的... 因为标准的话是不拆分单词或连续字符串的 残缺美嘛
  11. ReplyElton Disney
    呃~就凭你最后那句话,我决定了要学jquery~~
    • ReplyBigCat
      @Elton Disney, 这玩意儿绝对会和windows一样流行 为啥我不说linux流行?因为linux很专业...
  12. Replyxiaorsz
    :!: 貌似将DIV 放进
    $(document).ready(function() {}
    里一句话搞定!! :P
    • ReplyBigCat
      @xiaorsz, 这样子...不是还没出来就被干掉了...要保证div在第一时间加载吧.. 也试过$("#bgcontain").append("div id=loading 假装在异步加载ing .../div"); 似乎不行...
  13. Reply老孔
    偷偷加上,假装没看见ing
    • Reply老孔
      @老孔, 我没搞好。 :o
  14. Replyfisio
    来过
  15. Reply阿企
    请问大猫大牛,为什么要加这个效果类?浏览器本身下方状态栏难道不是有提示正在加载吗?
    • ReplyBigCat
      @阿企, 这个得问gmail为啥子要加了 偶等都素盲目跟风之人
      • Reply阿企
        @BigCat, gmail那个还好吧,这个世界上最复杂的网络邮箱页面在完全加载之前给个白屏,显得简洁;blog这样子就不简洁了,我觉得是这样的,呵呵。
        • ReplyBigCat
          @阿企, 早先gmail是有的... ...
  16. Replyvampire
    还要强调最后一个script应该放到body末尾吧 一直很喜欢jQuery 体积小效率高使用方便 就是代码太TM难读了
    • ReplyBigCat
      @vampire, 恩,我吧jquery库和自己的common.js都丢在footer
    • ReplyBigCat
      @vampire, 不对,.ready()就是加载所有代码后再执行 onload是加载所有内容 所以无所谓前后 丢后面的真正原因是库太大,要内容先显示才好...
  17. Replyaw
    男人!~~-。- 快支持Gravatar吧:)
    • ReplyBigCat
      @aw, :o 早加上了,不过后来发现bluehost的空间极慢,于是能精简的都精简...注释掉了gravatar :(
  18. Reply武斌
    博主这个做的很牛X啊,还有淡出缩小的效果,不过那个ing...超出了红色的范围。IE不支持圆角。
    • ReplyBigCat
      @武斌, 正常浏览器不支持连续字符换行...于是加了个空格..
  19. Reply菠菜
    这么技术的文章你也能写的那么银当! 牛! :!:
    • Replyzing
      @菠菜, 强烈+1
      • ReplyBigCat
        @zing, :idea: 总分几分...
  20. Reply就去干
    不限支持@#顶啊@##
  21. Replyhomer
    哇 一看见代码就等于看见了高科技了 ~~~
  22. Reply飞鱼
    :o 高级``
    • ReplyBigCat
      @飞鱼, ;) 雕虫小技...
  23. Replyyuki
    你什么时候换宽屏的版啊。。。 :x
    • ReplyBigCat
      @yuki, - -后来想想还是这个小版面比较舒服... :?:
  24. Replytracy
    我上了他了,修改了position属性,绝对定位。
    • ReplyBigCat
      @tracy, 哈,这样子虽然不会随着页面一起跑,至少各个浏览器统一了
  25. Reply2233
    :(
  26. Replyjk
    @BigCat 想知道你文中嵌入的插件!
    • ReplyBigCat
      @jk, http://wordpress.org/extend/plugins/wp-syntax/ check this out
  27. Reply易水寒
    加载... 你应该写个焦急缓冲的js..
    • ReplybigCat
      @易水寒, 焦急缓冲?...高端词汇?
  28. Reply蓝天博客
    学习。以前阿里的同事。幸会!
    • ReplybigCat
      @蓝天博客, :) 握手握手~~
  29. Replymr wu
    模板很漂亮,请教个问题,我用了coolcode插件,但是我的代码样式还是不对头。不知道什么原因。 这是我用了代码的页面,请帮我看看。谢谢了 http://18tvb.com/wordpress-to-the-editor-of-the-add-button-coolcode.html
    • ReplyBigCat
      @mr wu, :roll: 介个,在加入代码的时候要用pre包含,然后定义属性lang="javascript",如果需要行号,还需要加入起始行号line="1" 是按照说明书走的么?
  30. Reply
    :twisted: 大猫同学,N久不见。你的博客更加法力无限,无与伦比,出神入化了。。。 俺是wusuowei同事,还记得不?
    • ReplybigCat
      @猫, :o ,无老师好,现在偶也是一枚老师了...过瘾... 现在在哪里捏?都米消息了.. 不过偶也忙的不行
  31. Reply小墨
    现在想想还是放在边上好~~ 8O 有空把自己的改到边上去~ :P
    • ReplybigCat
      @小墨, :) 个人爱好不一样
  32. anothr user
    Anothr feed track -大猫爪 BigCat's Paw... One new subscriber from Anothr Alerts...
  33. Replyg.zhen.ning
    很棒
  34. Replygowers
    猫啊,你那个上面的图片很有意思啊,还有个办证~哈哈
    • ReplybigCat
      @gowers, :lol: 听花花说他在武林广场上看到一只流浪狗,头顶一纸条 办证
  35. ReplyChina_Y
    404那家伙原来在这里偷的 :P
    • ReplyBigCat
      @China_Y, 那个图?不是我画的啦,也是网上搞的哈
  36. Reply匿名
    :oops: :o :( :x
  37. ReplyDavid
    太有才了,可我还是不会用。。。能不能写个傻瓜版的 :o
    • ReplyBigCat
      @David, 8O aw同学那篇写的比较通俗点..基本上就是丢个样式在style.css ,丢个div在body最前,丢个js在body最后
      • ReplyDavid
        @BigCat, 我去cc :o
  38. Reply世纪之光
    好漂亮的皮肤,能共享吗?大猫同志。
    • ReplyBigCat
      @世纪之光, :oops: 这款皮肤基于mayabox v1修改的,而且修改了太多...以至于都不能直接拿出来分享...最近每天加班.等有时间的时候整理下发出来:) 可以先去用mayabox v1凑合...虽然好多问题..N年的老主题了
      • Reply世纪之光
        @BigCat, 真的是相当不错,我先去看看 mayabox v1
  39. Replycaixiaoeva
    我发现我的网站在你这里总是风雨飘摇,不定什么时候就不见了。。。 8O
    • ReplyBigCat
      @caixiaoeva, :oops: ?不是蹲在右边么...
  40. Reply老孔
    大猫最近很忙啊 :lol:
    • ReplyBigCat
      @老孔, :( 日夜加班...
  41. ReplyElton Disney
    为虾米大猫这么久都米有更新了? 难道说是结婚了?
  42. Replystranger
    :!: 收下了,谢谢大猫~
  43. Replyqn
    不错,正想找这个 谢谢猫猫
  44. jQuery(添加页面载入进度条 | MOPVHS's Blog
    [...] 本站的loading效果所用的一排loading.gif小图标是从大猫 [...]
  45. Replyjucelin
    贵站域名很NB,呵呵 :lol:
  46. Reply囧啊囧
    好吧!老师,这文章很帅,就是不知道从何下手,对菜鸟来说和天书差不多啊! :?:
  47. 给博客加上“正在加载”的提示信息 | 囧啊囧(vv15.com)
    [...] 给博客加上“正在加载”的提示信息 Posted on 2010-12-05 by fountain in 电脑&技巧 Leave a comment 分享 | 此文效果见本博页面左上角的“正在加载”那几个字,方法来自阿瓦的家和大猫,灰常感谢大猫老师的指教,下面做个备份以供自己和代码菜鸟朋友参考使用。 [...]
  48. Reply长岛冰泪
    男人的福音啊,女人怎么办呢

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>