预装载以及JavaScript Image()对象

时间:2010-04-16 12:18:10  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读:些浏览器试图通过在本地缓存中保存这些图片来解决此问题。这样一来可以顺序调用这些图片——但对于首次使用这些图片的时候仍然会存在延时。预装载就是一种在需要图片之前就将图片下载到缓存的技术。采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回来并立即显示。  Image()对象最简单的图像预装载办法是使用JavaScript新建一个新的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>

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

  Next page

  Preloading and the JavaScript Image() object

  onLoad()事件句柄(event handler)
同JavaScript中的许多其他对象一样,Image()对象同样有许多事件句柄。毫无疑问,其中最有用的是onLoad()句柄,它在图片完全装载时被调用。在图片完全装载之后,可以通过自定义函数来调用此句柄完成特定的功能。下例就给出了采用这样的方法实现如下动作的代码:当装载图片时显示“please wait”屏幕,然后一旦完成装载,就把浏览器引导到一个新的URL。

  <html>

  <head>

  <script language="JavaScript">

  // create an image object

  objImage = new Image();

  

  // set what happens once the image has loaded

  objImage.onLoad=imagesLoaded();

  

  // preload the image file

  objImage.src='images/image1n.gif';

  // function invoked on image load

  function imagesLoaded()

  {

   document.location.href='index2.html';

  }

  </script>

  </head>

  <body>

  Please wait, loading images...

  </body>

  </html>

  当然,你也可以创建一个图片数组,然后循环,对每个元素进行预装载,然后跟踪每个阶段所装载的图片数量。一旦所有的图片都被装载,可以对事件句柄编程,以将浏览器带入下一个阶段(或完成其他的任务)。

"预装载以及JavaScript Image()对象"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/13686.html


关键字:

关于《预装载以及JavaScript Image()对象》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td