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