预装载以及JavaScript Image()对象（转载）

最新推荐文章于 2024-09-18 15:54:57 发布

Super_man_2018

最新推荐文章于 2024-09-18 15:54:57 发布

阅读量580

点赞数

文章标签： image javascript 浏览器任务存储 internet

很多high-res图像真的可以使 Web 站点更加整洁。但是它们也会使站点的访问速度变慢€€€€图像是文件，文件应用带宽，带宽直接与等待时光相关。是该了解如何通过一个叫做图像预载入（preloading）的技巧来提高 Web 站点的访问速度的时候了。

图像预载入

对于浏览器载入图像来说，只有在对图像发送一个 HTTP要求之后，它们才会被浏览器载入，对图像的 HTTP 要求要么应用＜img＞标记，要么通过方法调用实现。如果应用 JavaScript 脚原本处理在 mouseover 事件时交换图像，或者在一段时光之后自动更改图像，那么在从服务器获取图像时可能要等上几秒钟到几分钟的时光。如果应用一个慢速的 Internet 连接，或者要获取的图像非常大，或者其它一些情形，这种现象就特别显著；这样，延迟就造成你不能达到自己期望的结果。

一些浏览器采用一些措施来缓解这一问题，比如试图通过在本地缓存中存储图像，从而使随后对图像的调用能够立即被满足；但是在图像第一次被调用时依然会存在一些延迟。预载入是在需要图像之前将其下载到缓存的一种方法。通过这一措施，当真正需要图像时，它就可以被立即从缓存中取出，从而能够立即显示。

Image() 对象

预载入图像最简单的方法是在 JavaScript 中实例化一个新 Image() 对象，然后将需要载入的图像的 URL 作为参数传入。假设我们有一个图像叫做heavyimagefile.jpg，在用户的鼠标放到一个已经显示的图像之上时，我们盼望显示这个图像。为了预载入这一图像从而得到较快的响应时光，我们简单地创造一个 Image() 对象 heavyImage，然后在 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>

请注意，图像标记本身不能处理 onMouseOver() 和 onMouseOut() 事件，这就是上例中<img> 标记被包孕在一个<a> 标记之中的原因，<a> 标记支持这两个事件类型。

应用数组载入多个图像

在实际利用中，我们可能需要预载入多个图像，而不止一个；例如，在一个包孕多个图像翻卷的菜单栏中，或者在我们试图创造平滑结果时，都需要预载入多个图像。其实这并不艰苦，只要应用 JavaScript 的数组即可实现，如下例所示：

程序代码

在上面的例子中，我们定义一个变量 i和一个 Image() 对象 imageObj。然后定义了一个新数组 images[]，每个数组元素存储要被预载入的图像。最后，创造一个 for() 循环来处理整个数组，并将每个元素赋给 Image() 对象，这样将其载入到缓存中。

onLoad() 事件处理器

像很多 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()

</script>
</head>

<body>
Please wait, loading images...
</body>
</html>

当然，你还可以创造一个图像数组然后在其上进行循环操作，预载入每个图像，然后在每一阶段跟踪被载入图像的数目。一旦所有图像载入完毕，依据事件处理器的程序逻辑，它就可以将浏览器带入下一个页面（或者执行其它任务）。

预载入和多状况菜单

现在，如何在实际利用程序中应用所有你学到的理论？下面的这段代码是我最近偶尔编写的一个菜单栏，这个菜单栏由一些按钮（图像链接）组成，每个按钮具有三种状况：正常、悬停和点击。因为按钮具有多种状况，所以很有必要应用图像预载入，以保证菜单的状况能够快速地反映。清单A中的代码解释了实现方法。

清单A 中的HTML 代码设置了一个由四个按钮组成的菜单，每个按钮具有三种状况：正常、悬停和点击。需求如下：

# 当鼠标移动到一个正常状况下的按钮之上时，它变为悬停状况。在鼠标离开之后，按钮恢复为正常状况。

# 在鼠标点击一个按钮时，按钮变为点击状况。在其它按钮被点击之前，它将保留这一状况。

# 如果一个按钮被点击，其它按钮的状况都不能为点击状况。其它按钮只能为悬停状况或正常状况。

# 在同一时光只能有一个按钮被点击。

# 在同一时光只能有一个按钮处于悬停状况。

第一个任务是设置数组，用于保留菜单每个状况的图像。与这些数组元素对应的＜img＞也在 HTML 文档正文（body）中创造，并顺序地命名。请注意，数组值的索引是从0开始的，虽然对应的＜img＞元素的命名是从1开始的€€€€这样就需要在脚本后面的部分进行企图调整。

函数 preloadImage() 负责将所有的图像存储到缓存中，以使鼠标运动的响应时光最小。for() 循环用于迭代第一步创造的图像，并在每次迭代中预载入一个图像。

函数 resetAll() 供给了一种快捷的方法来将所有图像重置为它们的正常状况。这是必要的，因为在一个项被点击时，被点击的项变为点击状况之前，菜单中的所有其它项都必需置为正常状况。

函数 setNormal()、setHover() 和 setClick() 用于将特定图像（将图像编号以一个参数传给每个函数）的状况相应地改变为正常、悬停和点击。因为被点击的图像在其它对象被点击之前必需保留它的状况（参见第二个规矩），所以它们临时不响应鼠标移动；这样，setNormal() 和 setHover() 函数的代码就只会改变目前不是处于点击状况的按钮的状况。

前面介绍的只是很多预载入图像的一种方法，这种方法可以帮助你提高 JavaScript 结果的响应速度。你可以自由地在你的站点中应用前面给出的方法，如果有必要，你可以依据自己的需要修正上面的代码。祝你好运！