2010年01月Archive for

IE8中的内存泄露

最近开发的时候对页面使用了定时的局部更新，结果在IE6，7和Firefox下，一切正常，而在IE8下过上几个小时就浏览器就崩溃了，显示是内存溢出，我以为是代码写的不好导致内存泄露，但是IE6，7又正常，调查了一下，原来这是IE8的bug。

问题点

在IE8中，生成特定Dom节点所占用的内存是不会被释放的，即使这些节点被删除内存也不会被释放。

内存泄露的节点类型包括：form、button、input、select、textarea、a、img和objec

其他的大部分节点类型是不会泄露的，例如：span、div、p、table等等。

此问题只发生在IE8，其他浏览器不发生。

如果用户按了F5，IE8会重新刷新页面，首先它会unload window.top，这时候会释放掉内存。如果页面是iframe，则unload此iframe，没有任何反应。看起来只有window.top被unload，内存才会被释放。

例子

例1

执行下面的代码，IE8就会泄露内存。

function leak1() {
    var node = document.getElementById("TO_AREA");
    node.innerHTML = "<img />";
    node.innerHTML = "";
    node = null;
}

注意：

* 此例子添加了节点，所以会泄露。

阅读全文 >>

性感的CD封面 – Javascript + CSS 实现CD封面的变换

网上看到的很有意思的东西，利用Javascript + CSS来变换CD的封面，其中主要是CSS在起作用，通过CSS的变化，让背景色和背景图片改变，从而改变CD的封面，实现起来很简单，更重要的是给我们了一种思路。



挑选风格:

阅读全文 >>

CSS 技巧之二 PNG Fix

大家都知道IE6对于CSS设计者来说，简直就是一坨屎，抱歉用这个词，但是我还真找不到其他更合适的词来形容它，当然仅限于CSS解析方面。

IE6有个大Bug就是不支持PNG图片的透明色，这就大大限制了页面的设计。目前网上有很多解决IE6下PNG透明色的方案，从使用IE特有的滤镜或是e­xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-image.

下面给大家介绍两个支持bacbackgrond-image的js插件。

Unit PNG Fix

原理

Unit PNG Fix工作原理是利用一个透明的gif图片来解决。

使用方法

首先加入js文件

<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
< ![endif]-->

把clear.gif文件拷贝到你的目录中，并在unitpngfix.js指定clear.gif的地址。

缺点

对于背景图片支持的不是很好，而且要添加另外的gif图片。
下载

DD_belatedPNG

原理

DD_belatedPNG 工作原理是利用VML技术来实现透明色。

使用方法

首先加入js文件

<!--[if lt IE 7]>
<script type="text/javascript" src="DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('#id, .classname');
</script>
< ![endif]-->

引入DD_belatedPNG.js，然后给输入的css class 应用解决方案。

缺点

需要一个一个的添加css类，比较麻烦，当然你可以输入DD_belatedPNG.fix(‘img,a,div,span, li’) 这种大的css标签。
下载

总结

以上两个js插件，我更喜欢后者，它的稳定性更好，功能更强大，我一直用项目开发中使用后者。

阅读全文 >>

CSS 技巧之一 CSS Sprite

Demo

CSS Sprite用得最多的地方恐怕就是导航条了，通常是导航条链接中，正常一种效果，hover时一种效果，如果是用图片来回切换的话，IE中会不停的从服务端下载图片，用户看起来时有延迟的，效果非常不好。让我们来看看下面的例子：

如果你打开CSS会发现，里面只有一张图片

再看看下面的 CSS 代码：

li#nav-home a { background:url(../images/navs.png) no-repeat; }
li#nav-about a { background:url(../images/navs.png) 0 -28px no-repeat; }
li#nav-work a { background:url(../images/navs.png) 0 -56px no-repeat; }
li#nav-services a { background:url(../images/navs.png) 0 -84px no-repeat; }
li#nav-contact a { background:url(../images/navs.png) 0 -112px no-repeat; }

阅读全文 >>

CSS设计的一些原则

最近几个月来，也做了不少CSS设计的工作，都是国外的客户，从一开始的啥都不懂，到现在的回头客不少，也算是有点心得了吧，跟大家分享分享。

大原则

DIV布局

因为表格布局会使浏览器的兼容性产生很大问题，比如在手机，掌上电脑用户浏览表格布局会一片混乱，所以最好使用DIV+CSS的布局，事实上我所有的客户，都是这样要求我的。

兼容性

对于一个好的CSS设计来说，必须保证所有的主流浏览器都能正常地显示，IE6+，Firefox，Chrome，Opera，Safari，这些浏览器都要支持的。

CSS Hack

还记得 !important 吧，这个 CSS Hack 一度很流行呀，但是好的设计者，最好不要使用 CSS Hack 技术，因为不同浏览器下Hack都不一样，说不定某次浏览器的升级使得你使用的Hack无效了呢。
目前流行的做法是，给IE，尤其是IE6单独做个CSS文件就好了，用新CSS覆盖掉老的，虽然有冗余，但是要比CSS Hack可读性好，也更容易修改。

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection" />
< ![endif]-->

页面头部设计

一个页面在设计的时候，设计者就要想到，正确添加头部信息，保证所有必要的头部信息都存在，有些是W3C标准所要求的，有些是SEO所需要的，下面就是一个典型的页面的头部设计。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 
	<title>Title</title>
 
	<meta name="keywords" content="" />
	<meta name="description" content="" />
 
	<meta name="language" content="en" />
	<meta name="author" content="" />
	<meta name="copyright" content="(c) Copyright 2009 All Rights Reserved" />
	<meta name="robots" content="follow, all" /></head></html>

阅读全文 >>

基于Javascript的计时器

与数字计数器一样，计时器也是基于Javascript的，基本的功能都有了：

  • 支持IE6+, Firefox, Chrome,Safari 4
  • 支持动画效果
  • 支持自动递增或递减
  • 支持设置随意时间
  • 支持设置是否显示0

显示0的固定时间:

不显示0的固定时间:

自动递增时间:

自动递减时间:


本站点提供下载的是免费版的JSCounter，可以用于非商业用途的网站和软件。如果希望用于商业网站或软件，请与我联系。

下载

捐赠


我的支付宝帐号：fogtower1979@gmail.com


阅读全文 >>
较旧的文章