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

最新推荐文章于 2025-04-15 09:26:06 发布

原创

最新推荐文章于 2025-04-15 09:26:06 发布 · 5.5k 阅读

CC 4.0 BY-SA版权

文章标签：

本文探讨了JavaScript中Image对象预加载图片的作用，通过对比不同浏览器在使用Image对象、<img>标签以及Canvas渲染图片时的内存占用情况，揭示了浏览器内存管理的差异。实验表明，Canvas在处理大量大尺寸图片时能有效降低内存占用，但可能牺牲对旧版IE的支持。

最近做的一个页面需要播放大量大尺寸高质量的图片。由于设计要求和限制一千多张图片必须放在同一个页面中切换，在这个过程中发现了许多关于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

利用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标签直接放出100张图片。

$(function(){
	for(var i =0; i<100; i++){
		$("body").append('<img src="images/'+( i+1 + Math.p