你的位置:首页 > Java教程

[Java教程]javascript图片预加载详细介绍


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

 

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>图片预加载-蚂蚁部落</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就会从缓存中读取,这样就不会出现延迟了。以上仅仅对单图片的处理,如果有很多图片需要被预加载,那么就可以结合数组来是实现此效果。
再来看一段代码实例:

 

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];  } } 

 

以上代码中,首先将图片的路径放入数组,然后在使用for循环语句遍历数组,并将相应的值赋值给image对象的src属性,这样就实现了图片放入缓存了,这样就实现了图片的预加载效果。大致就介绍这么多,如有任何问题可以跟帖留言。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9284

更多内容可以参阅:http://www.softwhy.com/javascript/