#preloader {
	/* Images you want to preload*/
	background-image: url(image1.jpg);
	background-image: url(image2.jpg);
	background-image: url(image3.jpg);
	width: 0px;
	height: 0px;
	display: inline;
}

又或者给背景一个大的position将图片推出浏览区域来实现预加载等等。

利用CSS还能有效的改善用户体验，看看这个：

img { background: url(loadingHourGlass.gif) no-repeat 50% 50%; }

咔咔，知道是干嘛的了吗 

在很多网站不断的把各种关键字加入到网页的keywords元标签里的时候，Google今天提醒大家，我们的排名系统是根本不鸟Keywords滴哦。

假设你拥有两个网站，Alice站和Bob站。Alice站是AliceCo公司的官网，而Bob则是BobCo公司的官方。如果有一天你将Alice站的Keywords原封不动的复制到Bob站，甚至包含了AliceCo这个关键字，那么你搜索AliceCo，Bob站的排名会有提升吗？

就09年9月的Google搜索结果来说，答案绝对是否定的。下面是四个问答：

问：Google曾经用过Keywords元字段来决定搜索结果排名吗？
答：简单的说，不。Google在销售的Google Search Appliance确实有使用元标签匹配的功能，且包括Keywords，但这是用于企业内部的搜索，跟我们的互联网搜索完全不同。我们的网页搜索是完全无视Keywords的，你在Keywords里做的所有努力都是徒劳的。

问：为什么Google不鸟关键字元标签？
答：大概十年前，搜索引擎只能根据网页的内容来判断一个网站，而无法考虑到其它因素（比如链接），而在最近，关键字元标签已经成为毫无关系的因素了，因为浏览者根本看不到这些关键字，而且关键字经常被网站主滥用，数年前Google就已经不鸟关键字元标签了。

问：这意味着Google完全无视所有的元字段吗？
答：当然不，Google还是支持其它元字段的，详情见此。比如，我们有时会将“descriptions”描述元字段作为搜索结果的文本显示出来，如下图所示。

但是，descriptions也只是用于显示搜索结果的网页介绍，它对搜索排名也完全没有任何影响。

问：这意味着Google一直都会无视Keywords？
答：也许Google未来会用这些数据吧，不过可能性也不大。Google早就无视Keywords了，现在我们也看不到改变这种政策的缘由。

Via Google Webmaster Central Blog

在日常的开发工作中，总是碰到要在站点的某个位置显示天气情况！！经过一段时间的积累，本人总算对这项需求把握的游刃有余，哈哈~

OK,废话不多说，切入正题。。。。

下面是几个很权威的站点：（我都是以福州为例子的，实际使用中可更改）

http://www.nmc.gov.cn/weatherdetail/58847.html

http://www.cma.gov.cn/tqyb/v2/cityweather.php?id=58847

http://wap.weather.com.cn/wap/58847/h24/（WAP的，嘿嘿，干扰内容忒少，非常容易采集）

http://www.weather.com.cn/static/html/weather_cj.shtml(这里有超多的样式了，挑吧)

比如这个：http://m.weather.com.cn/data/101230101.html（这个是JSON数据，PHP的json_decode函数很好弄它）

不过这个中国气象网老在防采集，树大招风咯，哈哈

$city="福州";

$url="http://weather.cn.yahoo.com/fetchdata.html?city=".rawurlencode($city); //UTF-8编码雅虎的天气，纯数据，具体的含义看雅虎官方的天气

http://qq.ip138.com/weather/fujian/FuZhou.htm(这个不知道是腾讯的天气数据来源，也很好采集)

http://www.tq121.com.cn/icbc/detail1.php?city=福州（工行的天气频道，呵呵）

http://www.tq121.com.cn/citybook/soufun/index.php?city=福州（搜房网）

http://www.tq121.com.cn/msnweather/detail.php?city=福州（MSN的吧？）

http://www.tq121.com.cn/product/p1/（这个最后的p1,可以换成p2,p3,p4,p5，具体我也没有测试一共多少个P）

http://www.soso.com/tb.q?cid=tb.tq&cin=&city=福州（这也是一个很正的位置，腾讯搜搜工具栏的天气预报）

陆续再更新吧，如果发现了更好的，我会拿出来分享滴

.clearfix:after{content:"\0020"; display:block; height:0; clear:both;}
.clearfix{*zoom:1;/*IE haslayout*/}
.box {float:left;margin-left:20px;_display:inline;/*双倍margin bug*/}

以后的浏览器对CSS的处理都采用W3C css2.1规范为主，私有属性为辅的策略，比如：

• Firefox：-moz-
• IE8：-ms-
• Safari & Chrome：-webkit-
• Opera：-o-

var iframe = document.createElement("iframe");
iframe.src = http://www.planabc.net;
if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}
document.body.appendChild(iframe);

• lt ：就是Less than的简写，也就是小于的意思。
• lte ：就是Less than or equal to的简写，也就是小于或等于的意思。
• gt ：就是Greater than的简写，也就是大于的意思。
• gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
• !：就是不等于的意思，跟javascript里的不等于判断符相同。

<!--[if lte IE 7]>
<style type="text/css">
    @import "test.css";
</style>
<![endif]-->

在“按需加载”的需求中，我们经常会判断当脚本加载完成时，返回一个回调函数，那如何去判断脚本的加载完成呢？

我们可以对加载的 JS 对象使用 onload 来判断（js.onload），此方法 Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持，但 IE6、IE7 却不支持。曲线救国 —— IE6、IE7 我们可以使用 js.onreadystatechange 来跟踪每个状态变化的情况（一般为 loading 、loaded、interactive、complete），当返回状态为 loaded 或 complete 时，则表示加载完成，返回回调函数。

对于 readyState 状态需要一个补充说明：

1. 在 interactive 状态下，用户可以参与互动。
2. Opera 其实也支持 js.onreadystatechange，但他的状态和 IE 的有很大差别。

具体实现代码如下：

function include_js(file) {
    var _doc = document.getElementsByTagName('head')[0];    
    var js = document.createElement('script');    
    js.setAttribute('type', 'text/javascript');    
    js.setAttribute('src', file);    
    _doc.appendChild(js);    
    
    if (!/*@cc_on!@*/0) { //if not IE        
        //Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload
        js.onload = function () {            
            alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload');       
        }    
    } 
    else {        
        //IE6、IE7 support js.onreadystatechange        
        js.onreadystatechange = function () {            
            if (js.readyState == 'loaded' || js.readyState == 'complete') {                
                alert('IE6、IE7 support js.onreadystatechange'); 
            }        
        }    
    }    
    return false;
}
        
//execution function
include_js('http://www.planabc.net/wp-includes/js/jquery/jquery.js');

JS代码如下：

function getFileSize(filePath){     
    var image=new Image();     
    image.dynsrc=filePath;     
    alert(image.fileSize);     
}

调试：

<input name="file" size="30" type="file" onchange="getFileSize(this.value)" />

尝试之路

考虑以下DOM结构：

<div id="page">
    <div id="hd"></div>
    <div id="bd">
        <div class="main"></div>
        <div class="sub"></div>
        <div class="extra"></div>
    </div>
   <div id="ft"></div>
</div>

利用浮动元素的负边距来定位：

    .main {
        float: left;
        width: 100%;
    }
    .sub {
        float: left;
        width: 190px;
        margin-left: -100%;
    }
    .extra {
        float: left;
        width: 190px;
        margin-left: -190px;
    }

这样我们得到了第一个尝试页面 pe_layout_example1.html.
可以看出，通过简单的负边距，已经让sub和extra定位到正确的位置。剩下的问题是如何让main也定位到正确的位置。

一个自然的想法是，给main的容器#bd添加padding:

    #bd {
        padding: 0 230px 0 190px;
    }

效果请看： pe_layout_example2.html.
这样能让main定位到正确的位置，但sub和extra的位置不对了。这是一个思考的关卡。既然sub和extra的位置不对，那就想办法调整到正确的位置。相对定位隆重登场：

    .sub {
        float: left;
        width: 190px;
        margin-left: -100%;
        position: relative;
        left: -190px;
    }
    .extra {
        float: left;
        width: 230px;
        margin-left: -230px;
        position: relative;
        right: -230px;
    }

demo页面： pe_layout_example3.html. 很明显，这就是圣杯布局！

组合这三种基本技术，我们可以继续尝试各种想法。比如伪绝对定位布局（这个布局不难想到，难的是第一个想到），类似的还有逆伪绝对定位布局（先都移动到最左边，然后再margin-right一个个移过来）等等。

在不增加任何额外标签的假设上，我尝试了各种想法，但始终都没找到完美的布局实现（圣杯布局是我觉得所有想法中最接近完美的）。

既然不添加额外标签时，完美布局的实现如此困难，那如果允许添加一个额外标签呢？在淘宝UED内部的探讨中，给main增加了一层包裹：

<div id="main" class="column">
      <div id="main-content">#main</div>
</div>

里层main-content的作用就是将main定位到合适的位置，并方便设置padding等属性。想到此处，就像牛顿被苹果砸傻了一样，原来的main定位问题迎刃而解：

<div id="page">
    <div id="hd"></div>
    <div id="bd">
        <div class="main">
            <div class="main-wrap"></div>
        </div>
        <div class="sub"></div>
        <div class="extra"></div>
    </div>
   <div id="ft"></div>
</div>

CSS仅需增加一行：

.main-wrap {
    margin: 0 230px 0 190px;
}

demo页面： pe_layout_example4.html.

一切如此简单！除了添加了一个额外标签，其它各方面，表现都很完美（试了下IE5.5, 也没任何问题）。目前只用到了浮动和负边距，如果再引入相对定位，还可以实现三栏布局的各种组合：

    .extra {
        float: left;
        width: 230px;
        margin-left: -100%;
        position: relative;
        left: 190px;
    }
    .main-wrap {
        margin-left: 430px;
    }

demo页面： pe_layout_example5.html.

仔细查看example5和example4的源代码，可以发现DOM结构是完全一样的，仅仅CSS稍有不同。这意味着HTML结构和CSS布局在一定程度上解耦了，我们开发HTML代码时，从内容出发即可，无需过多的考虑布局。这正是渐进增强在前端工作流程上的体现。

如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。因此请容许我给这个布局实现取名为双飞翼布局（Flying Swing Layout）.

就如上图中的鸟有各种姿势一样，利用双飞翼布局，我们也可以实现各种布局。这里有个尝试页面，利用双飞翼，实现了一套栅格化布局系统。

优点

1. 实现了内容与布局的分离，即Eric提到的Any-Order Columns.
2. main部分是自适应宽度的，很容易在定宽布局和流体布局中切换。
3. 任何一栏都可以是最高栏，不会出问题。
4. 需要的hack非常少（就一个针对ie6的清除浮动hack:_zoom: 1;）
5. 在浏览器上的兼容性非常好，IE5.5以上都支持。

不足

1. main需要添加一个额外的包裹层。
2. 等待你的发现与反馈。

补充

双飞翼布局的想法与实现受了圣杯布局和UED内部讨论的PPT的启发。尝试后发现一切如此简单，都有点奇怪为什么网络上一直没有文章来阐述。

前些日子主要精力都放在了阅读ALA上的文章，没怎么注意其它信息。昨天才仔细阅读Eric的Any-Order Columns和Alex的One True Layout, 发现这种思路和想法早就有人尝试过了。比如Eric原文中的例子是定宽的，但稍微修改，就可以演化为双飞翼布局。Alex的One True Layout, 给的例子被墙了，就一直没细看，今天才找代理过去瞄了一眼，一瞄不要紧，原来One True Layout就是双飞翼，不过Alex只用到了浮动和负边距，因此没有提及main - sub - extra这种排列的实现。

此外，中午还有一个非常震惊的发现：Alessandro早做了一个很详细的页面Layout Gala, 列举了40种布局，用的就是双飞翼！

巧合让人有点沮丧，但更让我高兴。因为Alex和Alessandro的工作，证明了这种布局的普适性。因此不用像采用伪绝对定位布局时一样，得担心新技术带来的风险！可以说，双飞翼布局已经是一个成熟的布局，但因为Alex的被墙，以及Alessandro的宣传力度不够，导致这个布局被我重新“发现”了一次。特撰此文，并取名为“双飞翼布局”，希望这个布局能让更多的人知道，并应用于实践中。

Jacob Seidelin 在他的博客中写道：

“2008年真是太棒了，不仅仅是因为很多厉害的人物在使用JavaScript和新的canvans元素，浏览器厂商也在竞争，试图超越对方在JavaScript方面的表现，这都证明了JavaScript的重要性。以下是我的总结：

Games

对于JavaScript游戏来说这一年很伟大。使用DHTML和基于Canvas的游戏似乎有能力来接管Flash的一些领域。许多经典的游戏都被重新的设计：Super Mario , Pac-Man （YUI pacman：很酷的YUI JavaScript库游戏）, Breakout , Space Invaders , Bomberman 和 T&C Surf Designs 。

还有很多在经典的旧游戏上加入了他们的新思想：Matt Hackett创作的 Spacius , Mark Wilcox 创作的 Invaders from Mars , VertigoProject创作的 RedLine Racing 和 Tetris game 。

我们甚至还看到了一些角色扮演的游戏：Andrew Wooldridge创造的Tombs of Asciiroth 和 CanvasQuest ，Pierre Chassaing创造的ProtoRPG。 虽然他们大多数都只是试用版或演示，但是我相信有一天他们会变的相当的酷。

2008年还出现了一些有趣的JavaScript / DHTML游戏库，最突出的就是GameJs （GameJS：超酷的Canvas游戏库）和GameQuery ，后者为jQuery库的扩展。

最后这个很特别， DEFENDER of the favicon，它将旧游戏Defender压缩到了只有16x16的空间。

Demos

越来越多的浏览器开始支持canvas元素，也就是说，在绘制动态图形方面我们又多了一种选择。有人制作出了一个小型简单的演示 ，用于展示Canavs的能力，但是有些人在这个基础上又向前迈了一步，就像 Matt Westcott制作的Antisocial demo 。

今年的大忙人Mathieu 'p01' Henri制作了很多小应用，使用一行代码就能做相当酷的事：Rubber effect ，Tunnex ，Mars ，他们都在256个字节以内！

Mathieu Henri 利用canvas元素，在20 lines 比赛 中创造出了惊人的效果： Dynamic Hypnoglow ，Twinkle 和 Hypno Trip Down the Fractal Rug 。这次比赛的优秀作品还有：colliding balls ，3D cube effect 和 dynamically generated BMP flames 。

Asylum inmates在20-line games的比赛中创建了：Lunar Lander ，a Boulderdash clone ，Wolfenstein 3D 。

3D

canvas元素只支持2D图像，但是这并不代表他不能制作出3D的效果：basic 3D cubes , texturing experiments ， JavaScript/Canvas 3D engines（很酷的 3D Canvas 演示）。还有许多3D的东西在Nihilogic上。

Emulation

Matt Westcott创造的JSSpeccy the ZX Spectrum emulator 。
James Urquhart 创造的SCUMM interpreter 。

我个人最喜欢的是JavaScript AGI interpreter。

Graphics

最令人印象深刻的是John Resig将Processing语言加入JavaScript-Processing.js  ，Aza Raskin创建了Algorithm Ink。Eitan Suez将Turtle，字符串图像变成工具转换成JavaScript版，TurtleJS 。

Audio

Cameron Adams 创建了一个有趣的JavaScript实例：JS-909 （JS-909：一个不使用Flash的有趣打鼓机器），这是一个打鼓机器，能够演奏声音而不使用Flash，也不使用任何库，声音由标签引入。
sk89q 创造的sine waveform generator ，动态生成和播放WAV文件。

其他

你能使用CSS做些什么了？是不是只是为了您的文字样式？显然不是，Román Cortés证明了这一点，他创造一个 Simpson的形象 ，但这需要你拥有足够的CSS技巧。另外，Ernest Delgado 提供了一个汽车导航的演示 （canvas：驾驶导航）。

最后一个类似于我们小时候玩的积木，Cubescape ，可选择不同的颜色。

我在此许愿，希望2009年的javaScript能更酷！”