预加载与javascript的Image()对象
|
很多高分辨率的图像真的能够扮靓一个Web网站。但是它们也可能会降低网站的（响应）速度——图像都是文件，文件就要占用带宽，而带宽与等待时间直接相关。现在是你进行自我学习，了解如何利用一种叫做图像预加载的小技巧给网站提速的时候了。 图像的预加载
有些浏览器会试图转嫁这一问题，比如把图像保存在本地缓冲区里，这样以后对它的调用就能够很快进行了，但是需要第一次调用图像的时候仍然会产生延迟。预加载是一项在需要图像之前就把它下载到缓冲区里的技术。通过这种方式，当真的需要图像的时候，它可以被从缓冲区里取出来，并立即显示出来。 Image()对象 <HTML><head><script language = "javascript">function preloader() {heavyImage = new Image(); heavyImage.src = "http://www.zzchn.com/edu/20071117/heavyimagefile.jpg";}</script></head><body onLoad="javascript:preloader()"><a href=../../"#" onMouseOver="javascript:document.img01.src="http://www.zzchn.com/edu/20071117/heavyimagefile.jpg""><img name="img01" src=../../"justanotherfile.jpg"></a></body></HTML>
<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]; } <HTML><head><script language="javascript">// create an image objectobjImage = new Image(); // set what happens once the image has loaded objImage.onLoad=imagesLoaded(); // preload the image fileobjImage.src="http://www.zzchn.com/edu/20071117/images/image1n.gif";// function invoked on image loadfunction imagesLoaded(){ document.location.href="index2.HTML";}</script></head><body>Please wait, loading images...</body></HTML>
预加载与多状态菜单 列表A里的HTML代码会建立一个由四个按钮组成的菜单条，每个按钮都有三种状态：正常、悬停和点击。其要求如下： 但鼠标移动到处于正常状态的按钮上时，按钮会变为悬停状态。当鼠标移开的时候，按钮又会恢复到正常状态。 PreloadImages()函数会负责把所有的图像都加载到缓冲区里，这样的话对鼠标移动的响应时间会被减到最小。一个for()循环被用在第一步里创建的图像里进行迭代，并预加载每一个图像。 ResetAll()函数是把所有图像恢复都到它们正常状态的方便方法。这是有必要的，因为当菜单的项目被点击的时候，菜单里其他所有的项目都必须在被点击项目能够切换到点击状态之前恢复到正常状态。 SetNormal()、setHover()和setClick()函数负责把特定图像（图像的编号被作为函数的自变量进行传递）的来源分别改为正常、悬停或者点击状态。由于被点击的图像必须一直保持点击状态，直到另外一个图像被点击（见第二项要求），所以它们暂时不会对鼠标移动作出反应；这样的话，如果按钮还不是处在点击状态，那么setNormal()和setHover()函数所包括的代码就只能用来改变按钮的状态。 上面所提到的预加载只是提高你javascript效果响应时间的多种方法之一。就在你的网站上使用上面列出的技巧，并根据你的要求在需要的地方更改它们吧。祝你好运！ 源代码网供稿. |
