Javascript的Image对象、图像渲染与浏览器内存两三事

最近做的一个页面需要播放大量大尺寸高质量的图片。由于设计要求和限制一千多张图片必须放在同一个页面中切换，在这个过程中发现了许多关于Image对象和浏览器的内存问题，然而网上讨论该问题的文章并不多。希望我这篇东西能给读者一些参考。

使用Javascript创建new Image()对象的最主要作用就是实现图片预加载。

预加载的实现很简单，百度谷歌一下会有很多相关的文章。其核心说到底也就两句话：

var img = new Image();
img.src = "my_image.jpg";

废话不多说，我们来做几个实验。用IE 9、Firefox 14、Chrome 21这三大主流引擎代表浏览器测试比较。详细的测试结果我就不列出来啦，各位自己可以去试一下。这里主要比较的是物理内存占用情况。

图片参数：1440*758px 17.4KB/每张 共100张 1.7MB

实验一：Image对象参照实验

利用100张同样尺寸和大小的图片创建100个Image对象作为参照。代码如下：

var imgs = [];
for(var i =0; i<100; i++){
	imgs[i] = new Image();
	imgs[i].src = "images/"+( i+1 + Math.pow(10,3)).toString().substr(1) + ".jpg";
}

实验二：<img>标签参照实验 & 浏览器渲染

用img标签直接放出100张图片。