(无修正)给页面加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真是所有男人的福音啊

97 评论

添加您的 →

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

发表回复