js 利用image对象实现图片的预加载提高访问速度

166 阅读 0 评论 110 点赞

我是靠谱客的博主成就长颈鹿，最近开发中收集的这篇文章主要介绍js 利用image对象实现图片的预加载提高访问速度，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

大量采用高解析度的图像的确可以让一个Web站点容光焕发。但同样也会造成站点访问速度下降——图片是文件，文件就要占用带宽，而带宽直接同访问等待时间相关。现在，让我们来学习一种名为图像预装载（image preloading）的小技巧来提高图像访问速度。

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

Image()对象
最简单的图像预装载办法是使用JavaScript新建一个新的Image()对象，然后将希望预装载的图片URL传递给此对象。假设我们拥有一个名为heavyimagefile.jpg的图片文件，我们希望当用户鼠标指针移动到一张已有的图片上时显示此文件。为了能更快的对此文件进行预装载，我们简单的创建了一个名为heavyImage的新Image() 对象，然后将其通过onLoad()事件句柄同步装载到页面上。

复制代码代码如下:

 
<html> 
<head> 
<script language = "JavaScript"> 
function preloader() 
{ 
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++) 
{ 
imageObj.src=images[i]; 
} 
} 
</script> 