javascript图片预加载详细介绍

漂亮清晰的图片往往能够给网站增色不少，但是也会带来不少的问题，漂亮清晰的图片自然自然在传输的时候会耗费更长的时间，如果我们需要即时的切换一张图片的话可能会带来延迟，例如在网页上有一张图片，当鼠标放在此图片上的时候能够切换成另一张图片，这个时候可能会出现延迟，如果实现将需要切换的图片显示出来，那么网站的效果就会更加流畅，这其实就是图片预加载，下面就来简单的介绍一下。

先看一段代码实例:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>图片预加载-51前端</title>
<script type="text/javascript"> 
function preloader() 
{ 
  switchImg=new Image(); 
  switchImg.src="switchImgFile.jpg"; 
} 
window.onload=function()
{
  preloader(); 
  var thelink=document.getElementById("thelink");
  var theimg=document.getElementById("theimg");
  thelink.onmouseover=function()
  {
     theimg.src="switchImgFile.jpg"; 
  }
}
</script> 
</head> 
<body> 
  <a href="#" id="thelink"><img id="theimg" src="currentfile.jpg"></a> 
</body> 
</html>

以上就是一个简单的图片预加载代码实例，下面简单做一下介绍:

在上面的代码中，当稳当加载完毕之后就会执行preloader()函数，此函数中可以创建一个图片对象，并将图片对象的src属性值设置为要切换的图片，这样此图片就会被放入缓存，当鼠标放在链接上的时候，那么switchImgFile.jpg就会从缓存中读取，这样就不会出现延迟了。以上仅仅对单图片的处理，如果有很多图片需要被预加载，那么就可以结合数组来是实现此效果。

再来看一段代码实例:

[ 其他 ] 运行代码下载代码

<script>
function preloader() { 
  var i=0; 
  imageObj=new Image(); 
  images=new Array(); 
  images[0]="image1.jpg"
  images[1]="image2.jpg"
  images[2]="image3.jpg"
  images[3]="image4.jpg"
    
  for(i=0;i<=3;i++) { 
    imageObj.src=images[i]; 
  } 
}
</script>

代码描述：javascript 图片预加载。javascript图片预加载详细介绍

下载全部收藏

133 178

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册