繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 预装载以及javascript Image()对象
- Javascript
- IE与firefox下Dhtml的一些区别小结
- jQuery Selectors(选择器)的使用(一、基本篇)
- jQuery Selectors(选择器)的使用(二、层次篇)
- jQuery 跨域访问问题解决方法
- jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
- javascript 面向对象全新理练之数据的封装
- javascript 面向对象全新理练之继承与多态
- javascript 面向对象全新理练之原型继承
- JavaScript 生成随机数并自动大小排序
- JavaScript利用split函数按规定截取字符串(获取邮箱用户名)
- JavaScript 双级下拉菜单实现代码
- JavaScript split()使用方法与示例
- 33种Javascript 表格排序控件收集
- js 屏蔽鼠标右键脚本附破解方法
- javascript json 新手入门文档
- jQuery Selectors(选择器)的使用(四-五、内容篇&可见性篇)
- javascript KeyDown、KeyPress和KeyUp事件的区别与联系
- javascript 汉字转拼音实现代码
- javascript 跳转代码集合
- JavaScript 申明函数的三种方法 每个函数就是一个对象（一）
Javascript 中的 预装载以及javascript Image()对象
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-03 浏览: 137 ::
收藏到网摘: n/a
大量采用高解析度的图像的确可以让一个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="/upload/tech/20091103/20091103132445_75fc093c0ee742f6dddaa13fff98f104.jpg"">
<img name="img01" src="/upload/tech/20091103/20091103132447_fc49306d97602c8ed1be1dfbf0835ead.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="/upload/tech/20091103/20091103132453_43fa7f58b7eac7ac872209342e62e8f1.gif";
// function invoked on image load
function imagesLoaded()
{
评论 (0) 