11 月

(无修正)给页面加Loading

星期三, 2008 By bigCat . under Code .

大家先来跟我学一个单词

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

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

» You can leave a comment, or trackback from your own site.

大战 97 回合 to “(无修正)给页面加Loading”

Elton Disney说道：

2008-12-11 19:42

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

回复
- 世纪之光说道：
  
  2008-12-12 17:51
  
  @Elton Disney, 跟他结婚的大母猫？
  
  回复
  - Elton Disney说道：
    
    2008-12-12 17:58
    
    @世纪之光, 很有可能～～
    嗯嗯
- BigCat说道：
  
  2008-12-12 22:57
  
  @Elton Disney, 🙁 日夜加班…
  
  回复
stranger说道：

2009-01-01 12:57

❗ 收下了，谢谢大猫～

回复
qn说道：

2009-07-24 09:02

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

回复
jQuery(添加页面载入进度条 | MOPVHS's Blog说道：

2010-03-30 14:37

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

回复
jucelin说道：

2010-11-22 19:04

贵站域名很NB，呵呵 😆

回复
- bigCat说道：
  
  2010-11-22 20:54
  
  @jucelin, NB域名很贵,呜呜 🙁
  
  回复
囧啊囧说道：

2010-12-05 15:17

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

回复
- bigCat说道：
  
  2010-12-06 12:52
  
  @囧啊囧, 自学成才啊同学
  
  回复
给博客加上“正在加载”的提示信息 | 囧啊囧(vv15.com)说道：

2010-12-05 16:23

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

回复
长岛冰泪说道：

2011-09-29 13:32

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

回复