26
11 月
(无修正)给页面加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…… 😉
@Leo, 我也假装没有看到并飘过ing…… 😈
@Enson, 假装没有写过并飘过ing… 😯
aw那是只见loading，不见页，半天没动静；
你这是只见页面，不见loading，标示一闪而过…
@sogoo, 我代码多摩多摩的简洁…当代码加载完了后就hide掉loading了…
挖哈哈
jjjjjjquery ❗
为虾么jQuery是男人的福音咧？不是女人的福音咧？莫灰prototype,aculo.script.us……才素？ 😛
@达达, 因为没有内涵不要紧,方便又好用就成,这话不是在说prototype…
无视加载框，哇咔咔
@zylew, 光纤? ❗
@BigCat,不对，比光纤还猛
@zylew, 😯 直接机房拉网线?
@BigCat, 说的差不多了，其实我正在用你的服务器上网，哇咔咔
效果看起来很不错。
@geuro, 就是多了坨无用标签… ❓
不过
还是竖着的，为了看这个我ctrl+F5了一下
@小墨, ❓ 看来大家网速都不错嘛
一天天
在opera下有点问题
@鬼火, 😳 我用9.X的opera没看出啥子问题来呀….
@bigCat, 有图有真相
http://www.404cn.net/blog/attachment/200811/1227832824_33801bc1.jpg
@鬼火, 😮 你说点点点溢出啊…
故意的…
因为标准的话是不拆分单词或连续字符串的
残缺美嘛
呃～就凭你最后那句话，我决定了要学jquery～～
@Elton Disney, 这玩意儿绝对会和windows一样流行
为啥我不说linux流行?因为linux很专业…
❗ 貌似将DIV 放进
$(document).ready(function() {}里一句话搞定！！ 😛
@xiaorsz, 这样子…不是还没出来就被干掉了…要保证div在第一时间加载吧..
也试过$(“#bgcontain”).append(“div id=loading 假装在异步加载ing …/div”);
似乎不行…
偷偷加上，假装没看见ing
@老孔, 我没搞好。 😮
来过
请问大猫大牛，为什么要加这个效果类？浏览器本身下方状态栏难道不是有提示正在加载吗？
@阿企, 这个得问gmail为啥子要加了
偶等都素盲目跟风之人
@BigCat, gmail那个还好吧，这个世界上最复杂的网络邮箱页面在完全加载之前给个白屏，显得简洁；blog这样子就不简洁了，我觉得是这样的，呵呵。
@阿企, 早先gmail是有的… …
还要强调最后一个script应该放到body末尾吧
一直很喜欢jQuery 体积小效率高使用方便 就是代码太TM难读了
@vampire, 恩,我吧jquery库和自己的common.js都丢在footer
@vampire, 不对,.ready()就是加载所有代码后再执行 onload是加载所有内容
所以无所谓前后
丢后面的真正原因是库太大,要内容先显示才好…
男人！~~-。-
快支持Gravatar吧：）
@aw, 😮 早加上了,不过后来发现bluehost的空间极慢,于是能精简的都精简…注释掉了gravatar 🙁
博主这个做的很牛X啊，还有淡出缩小的效果，不过那个ing…超出了红色的范围。IE不支持圆角。
@武斌, 正常浏览器不支持连续字符换行…于是加了个空格..
这么技术的文章你也能写的那么银当！
牛！ ❗
@菠菜,
强烈+1
@zing, 💡 总分几分…
不限支持@#顶啊@##