js预载入和JavaScript Image()对象使用介绍
更新时间：2011年08月28日 17:41:52 作者：
为了解决在canvas使用drawImage()时,遇到img对象来不及加载的问题; 我最终在html文档加载中,使用了下面"数组加载图像的办法”解决,如果有其他方法,请给予指点!
预载入和JavaScript Image()对象
很多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 的数组即可实现，如下例所示：
<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和一个 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()
{
document.location.href='index2.html';
}
</script>
</head>
<body>
Please wait, loading images...
</body>
</html>
当然，你还可以创建一个图像数组然后在其上进行循环操作，预载入每个图像，然后在每一阶段跟踪被载入图像的数目。一旦所有图像载入完毕，根据事件处理器的程序逻辑，它就可以将浏览器带入下一个页面（或者执行其它任务）。
预载入和多状态菜单
现在，如何在实际应用程序中使用所有你学到的理论？下面的这段代码是我最近偶尔编写的一个菜单栏，这个菜单栏由一些按钮（图像链接）组成，每个按钮具有三种状态：正常、悬停和点击。因为按钮具有多种状态，所以很有必要使用图像预载入，以保证菜单的状态能够快速地反应。清单A中的代码说明了实现方法。
清单A 中的HTML 代码设置了一个由四个按钮组成的菜单，每个按钮具有三种状态：正常、悬停和点击。需求如下：
# 当鼠标移动到一个正常状态下的按钮之上时，它变为悬停状态。在鼠标离开之后，按钮恢复为正常状态。
# 在鼠标点击一个按钮时，按钮变为点击状态。在其它按钮被点击之前，它将保留这一状态。
# 如果一个按钮被点击，其它按钮的状态都不能为点击状态。其它按钮只能为悬停状态或正常状态。
# 在同一时间只能有一个按钮被点击。
# 在同一时间只能有一个按钮处于悬停状态。
第一个任务是设置数组，用于保存菜单每个状态的图像。与这些数组元素对应的 ＜img＞ 也在 HTML 文档正文（body）中创建，并顺序地命名。请注意，数组值的索引是从0开始的，虽然对应的 ＜img＞ 元素的命名是从1开始的——这样就需要在脚本后面的部分进行计算调整。
函数 preloadImage() 负责将所有的图像存储到缓存中，以使鼠标运动的响应时间最小。for() 循环用于迭代第一步创建的图像，并在每次迭代中预载入一个图像。
很多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 的数组即可实现，如下例所示：
复制代码 代码如下:
<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和一个 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()
{
document.location.href='index2.html';
}
</script>
</head>
<body>
Please wait, loading images...
</body>
</html>
当然，你还可以创建一个图像数组然后在其上进行循环操作，预载入每个图像，然后在每一阶段跟踪被载入图像的数目。一旦所有图像载入完毕，根据事件处理器的程序逻辑，它就可以将浏览器带入下一个页面（或者执行其它任务）。
预载入和多状态菜单
现在，如何在实际应用程序中使用所有你学到的理论？下面的这段代码是我最近偶尔编写的一个菜单栏，这个菜单栏由一些按钮（图像链接）组成，每个按钮具有三种状态：正常、悬停和点击。因为按钮具有多种状态，所以很有必要使用图像预载入，以保证菜单的状态能够快速地反应。清单A中的代码说明了实现方法。
清单A 中的HTML 代码设置了一个由四个按钮组成的菜单，每个按钮具有三种状态：正常、悬停和点击。需求如下：
# 当鼠标移动到一个正常状态下的按钮之上时，它变为悬停状态。在鼠标离开之后，按钮恢复为正常状态。
# 在鼠标点击一个按钮时，按钮变为点击状态。在其它按钮被点击之前，它将保留这一状态。
# 如果一个按钮被点击，其它按钮的状态都不能为点击状态。其它按钮只能为悬停状态或正常状态。
# 在同一时间只能有一个按钮被点击。
# 在同一时间只能有一个按钮处于悬停状态。
第一个任务是设置数组，用于保存菜单每个状态的图像。与这些数组元素对应的 ＜img＞ 也在 HTML 文档正文（body）中创建，并顺序地命名。请注意，数组值的索引是从0开始的，虽然对应的 ＜img＞ 元素的命名是从1开始的——这样就需要在脚本后面的部分进行计算调整。
函数 preloadImage() 负责将所有的图像存储到缓存中，以使鼠标运动的响应时间最小。for() 循环用于迭代第一步创建的图像，并在每次迭代中预载入一个图像。
相关文章
这篇文章主要介绍了JS使用eval解析JSON的注意事项,结合实例形式具体分析了JS解析JSON的技巧与使用evel时的注意事项,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
这篇文章主要介绍了javascript关于“时间”的一次探索，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了使用Bootstrap和Vue实现用户信息的编辑删除功能,需要的朋友可以参考下2017-10-10
其实这个效果不是什么难实现的效果，关键注意几个地方就可以了2011-04-04
这篇文章主要为大家详细介绍了p5.js绘制旋转的正方形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
多年以来，IE一直都是最难于调试JavaScript 错误的浏览器。IE给出的错误消息一般很短又语焉不详。而且上下文信息也很少，有时甚至一点都没有。下面几小节将分别探讨一些在IE中难于调试的JavaScript 错误2016-11-11
这篇文章主要为大家详细介绍了微信小程序视图容器（swiper）组件创建轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
最近用CodeMirror2作后台的模板编辑器，在IE9、Firefox下面没有问题。到了IE7、IE8下面，textarea里面的代码就显示不出来了。搜索了好多，终于找到原因2012-03-03
今天小编就为大家分享一篇layer父页获取弹出层输入框里面的值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了ES6 如何改变JS内置行为的代理与反射，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
最新评论