javascript 使用image对象实现图片预加载方法详解
大量采用高解析度的图像，会造成站点访问速度下降——图片是文件，文件就要占用带宽，而带宽直接同访问等待时间相关。
本节我们学习，一种名为图像预装载（image preloading）的小技巧来提高图像访问速度。
一些浏览器试图通过在本地缓存中保存这些图片来解决此问题。
如此，便可以顺序调用这些图片。但是，对于首次使用这些图片的时候仍然会存在延时。
预装载就是一种在需要图片之前就将图片下载到缓存的技术。采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回来并立即显示。
什么是Image()对象
最简单的图像预装载办法，是使用JavaScript新建一个新的Image()对象，然后，将希望预装载的图片URL传递给此对象。
假设，有一个名为heavyimagefile.jpg的图片文件，希望当用户鼠标指针移动到一张已有的图片上时显示此文件。
为了能更快的对此文件进行预装载，创建了一个名为heavyImage的新Image() 对象，然后将其通过onLoad()事件句柄同步装载到页面上。
代码如下：
<head>
<title>使用image对象实现图片预加载-www.jiaochengji.com</title>
<script language = "JavaScript">
function preloader()
{
var heavyImage = new Image();
heavyImage.src = "heavyimagefile.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'">
<img name="img01" src="justanotherfile.jpg"></a>
</body>
</html>
注意，图片的标签（tag）本身并不处理onMouseOver()以及onMouseOut()事件，这也正是上面示例中的<img>标签被包括在<a>标签中的原因。标签<a>则包括了对这些事件类型的支持。
通过数组（arrays）装载多个图片
有时，可能需要预装载不止一张的图片；比如，对于包括多个图片的菜单条，或者希望实现平滑的动画效果。
要实现这些并不困难，只需要利用JavaScript的数组，看下面这个例子：
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="image1.jpg"
images[1]="image2.jpg"
images[2]="image3.jpg"
images[3]="image4.jpg"
// start preloading
for(i=0; i<=3; i++)
{
var imageObj = new Image;
imageObj.src=images[i];
}
}
</script>
以上示例中，定义了变量i以及名为imageObj的Image()对象。
然后，定义了新数组images[]，每一个数组元素将存储需要预装载图片的地址来源。
最后，使用一个for()循环来遍历整个数组，并对每个元素指定Image()对象，以此将图片都预装载到缓存中。
您可能感兴趣的文章：
js image对象预加载图片的方法详解
javascript 使用image对象实现图片预加载方法详解
使用jquery插件实现图片延迟加载技术详细说明
JS实现图片预加载而无需等待的方法
H5中文件上传的详细介绍
在HTML5 Canvas中放入图片和保存为图片的方法
关于IE下图片的预加载过程
Canvas跨域的解决方案介绍
关于HTML5实现图片压缩上传功能
javascript缓存图片到本地的实现代码