js image对象预加载图片的方法详解

发布时间:2019-07-25编辑:脚本学堂
本文介绍下,在javascript编程中,使用image对象预加载图片的方法与实例,有兴趣的朋友参考学习下。

学习一种名为图像预装载(image preloading)的小技巧来提高图像访问速度。

一些浏览器试图通过在本地缓存中保存这些图片来解决此问题。这样一来可以顺序调用这些图片——但对于首次使用这些图片的时候仍然会存在延时。预装载就是一种在需要图片之前就将图片下载到缓存的技术。采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回来并立即显示。

一,Image()对象
最简单的图像预装载办法:
使用javascript新建一个新的Image()对象,然后将希望预装载的图片URL传递给此对象。
假设拥有一个名为heavyimagefile.jpg的图片文件,当用户鼠标指针移动到一张已有的图片上时显示此文件。

为了能更快的对此文件进行预装载,简单创建一个名为heavyImage的新Image() 对象,然后,将其通过onLoad()事件句柄同步装载到页面上。
 

复制代码 代码示例:
<html>
<head>
<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的数组,如下例:
 

复制代码 代码示例:
<script language="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++)
     { // www.jb200.com
  var imageObj = new Image;
          imageObj.src=images[i];
     }
}
</script>

总结:
定义了变量i以及名为imageObj的Image()对象。
然后,定义了新数组images[],每一个数组元素将存储需要预装载图片的地址来源。
最后,使用一个for()循环来遍历整个数组,并对每个元素指定Image()对象,以此将图片都预装载到缓存中。