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