支持多浏览器的网站变灰方法

这篇文章中给出了针对 IE 浏览器的使网站变灰的方法，具体做法是在 CSS 文件的开头添加这样一行：

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

但是很遗憾这种方法并不能支持 Firefox 和 Chrome。这篇博客介绍一种支持各种浏览器的网站变灰方法，试验其支持 Firefox、Chrome 和 IE，据说可以支持 Opera（未测试），方法比较简单，就直接介绍步骤了。

1. 到这里下载 grayscale.js 文件到你网站的根目录（或者也可以不下载，直接引入该 js，未测试）。

2. 在网站的 footer 或者 header 等全局的文件中插入以下代码（注意，$() 和 .load handler需要 jquery.js 的支持，不使用 jquery 的同学可以自行搜索解决标签查找和 window onload 事件处理问题，例如这里和这里）：

<script type="text/javascript" src="/grayscale.js"></script>
<script type="text/javascript">
$(window).load(function () {
  grayscale( $('body') );
});
</script>

该方法的缺点是：

1. 页面加载完后才对整个页面进行变灰操作；
2. 在非 IE 浏览器中不支持来自其它域名的网站图片的变灰；
3. 造成非 IE 浏览器在加载完页面后进行大量 js 计算，该计算负担可以通过仅变灰 img, a 等标签而不是 body 来优化。