Javascript的Image对象、图像渲染与浏览器内存两三事
最近做的一个页面需要播放大量大尺寸高质量的图片。由于设计要求和限制一千多张图片必须放在同一个页面中切换，在这个过程中发现了许多关于Image对象和浏览器的内存问题，然而网上讨论该问题的文章并不多。希望我这篇东西能给读者一些参考。
使用Javascript创建new Image()对象的最主要作用就是实现图片预加载。
预加载的实现很简单，百度谷歌一下会有很多相关的文章。其核心说到底也就两句话：
<input type="button" value="change"/><canvas id="cv" width="1440" height="758">Your canvas tag is not supported.</canvas><script>var cv = document.getElementById("cv");var ctx = cv.getContext("2d");var preload = [];for(var i =0; i<100; i++){preload[i] = new Image();preload[i].src = "images/"+( i+1 + Math.pow(10,3)).toString().substr(1) + ".jpg";}$(function(){var n = -1;$("INPUT").click(function(){if( ++n<100 ){ctx.drawImage(preload[n], 0, 0);}});});</script>相较于上一个实验，这个实验的内存占用大大缩减。Canvas简直太酷了！