夏日博客

A-A+

js利用Image()对象实现图片预加载

2016年10月15日 前端设计 暂无评论 阅读 6 views 次

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

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

  1. <html>  
  2. <head>  
  3. <script language = "JavaScript">  
  4. function preloader()  
  5. {  
  6.      heavyImage = new Image();  
  7.      heavyImage.src = "heavyimagefile.jpg";  
  8. }  
  9. </script>  
  10. </head>  
  11. <body onLoad="javascript:preloader()">  
  12. <a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'">  
  13. <img name="img01" src="justanotherfile.jpg"></a>  
  14. </body>  
  15. </html>  

注意，图片的标签（tag）本身并不处理onMouseOver()以及onMouseOut()事件，这也正是上面示例中的img标签被包括在a标签中的原因。标签a则包括了对这些事件类型的支持。

通过数组（arrays）装载多个图片,在实际情况中,你很有可能需要预装载不止一张的图片；比如，对于包括多个图片的菜单条，或者希望实现平滑的动画效果,要实现这些并不困难,只需要利用JavaScript的数组，如下例所示：

  1. <script language="JavaScript">  
  2. function preloader()  
  3. {  
  4.      // counter  
  5.      var i = 0;  
  6.      // create object  
  7.      imageObj = new Image();  
  8.      // set image list  
  9.      images = new Array();  
  10.      images[0]="image1.jpg"  
  11.      images[1]="image2.jpg"  
  12.      images[2]="image3.jpg"  
  13.      images[3]="image4.jpg"  
  14.      // start preloading  
  15.      for(i=0; i<=3; i++)  
  16.      {  
  17.           imageObj.src=images[i];  
  18.      } //xiariboke.net  
  19. }  
  20. </script>  

在上面的例子中，定义了变量i以及名为imageObj的Image()对象。然后定义了新数组images[]，每一个数组元素将存储需要预装载图片的地址来源.

标签：

给我留言