预装载以及JavaScript Image()对象

2008-02-23 07:39:47来源：互联网阅读 ()

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

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

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

　　<html>

　　<head>

　　function preloader()

　　{

　　 heavyImage = new Image();

　　 heavyImage.src = "heavyimagefile.jpg";

　　}

　　</script>

　　</head>

　　</body>

　　</html>

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

　　通过数组（arrays）装载多个图片

　　在实际情况中，你很有可能需要预装载不止一张的图片；比如，对于包括多个图片的菜单条，或者希望实现平滑的动画效果。要实现这些并不困难，只需要利用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()对象，以此将图片都预装载到缓存中。

　　Preloading and the JavaScript Image() object

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

　　<html>

　　<head>

　　// 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>

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

预装载和多状态（Multi-State）菜单
现在，如何将刚刚学习到的所有理论知识应用到实际的应用程序中？下面是一段我最近编写的代码——一个包括按钮（图片链接）的菜单条，每一个按钮都可能处于三种状态中的一种：正常、鼠标悬浮和单击。由于按钮具有多种状态，所以必须使用图片预装载来确保菜单能足够快的对状态改变进行响应。列表A中的代码显示了如何实现此功能：

　　列表A中的HTML代码建立了一个包括四个按钮的菜单条，每一个按钮都有三种状态：正常、鼠标悬浮和单击。触发条件如下：

鼠标指针移动到处于正常状态的按钮，按钮则变为鼠标悬浮状态。鼠标移出按钮区域之后，按钮返回到正常状态。

　　鼠标单击按钮，按钮则变为单击状态。在另一按钮被单击之前，它将保持在此状态。

如果单击了某个按钮，其他任何按钮不能处于单击状态，只能是处于鼠标悬浮或正常状态。

　　每次只能单击一个按钮。

　　每次只能有一个按钮处于鼠标悬浮状态。

　　首要任务是设置存储菜单每种状态图片的数组。数组元素相应的元素<img>同样在HTML文档主体中创建，并且按照顺序命名。请注意，数组值的索引序列是从0开始，而相应的<img>元素则从1开始命名——这就要求在脚本的后半段要对相应数值作运算调整。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有