分享
 
 
 

预载入和&#106avascript Image()对象

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

很多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() 循环用于迭代第一步创建的图像,并在每次迭代中预载入一个图像。

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

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

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有