预加载以及javascript的Image()对象
作者 佚名技术
来源 JSP编程
浏览
发布时间 2012-07-03
| ()处理程序了，它会在完成图像加载的时候被调用。这个处理程序可以与自定义的函数一起使用，以便在完成图像加载之后进行特定的任务。下面的例子通过在图像加载的时候显示“请等待（please wait）”提示信息来说明这个问题，然后在图像完成加载之后就向浏览器发送一个新的URL。 <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=''images/image1n.gif'';// function invoked on image loadfunction imagesLoaded(){ document.location.href=''index2.html'';}</script></head><body>Please wait, loading images...</body></html> 当然，你还可以创建一个图像数组，对它进行循环，预加载每个图像，并在每个阶段对已加载图像的数量保持跟踪。一旦加载了所有的图像，事件处理程序就能够按照设定把浏览器带到下一个页面（或者进行其他的任务）。 预加载与多状态菜单 现在，把你刚刚学到的理论付诸真正的实践怎么样？下面一部分内容就是我碰巧编写的一段代码——一个由多个按钮（图像链接）组成的菜单条——其中每个按钮都可能处于三种状态中的一种：正常（normal）、hover（悬停）和点击（click）。由于所有的按钮都有多个状态，所以就有必要使用图像预加载来确保菜单能够根据其切换到的状态进行快速的响应。列表A里的代码就说了这一点。 列表A里的HTML代码会建立一个由四个按钮组成的菜单条，每个按钮都有三种状态：正常、悬停和点击。其要求如下： 但鼠标移动到处于正常状态的按钮上时，按钮会变为悬停状态。当鼠标移开的时候，按钮又会恢复到正常状态。 当鼠标点击按钮的时候，按钮就会变为点击状态。它会一直保持这个状态，直到另外一个按钮被点击。 如果有一个按钮被点击，那么其他的按钮就都不能处于点击状态。其他的按钮只能够处于悬停或者正常状态。 一次只能有一个按钮可以被点击。 一次只能有一个按钮处于悬停状态。 第一项任务是建立保存有菜单每个状态的图像的数组。与这些数组元素相对应的<img>元素也都在HTML文档的主体里被创建，并按顺序命名。要注意的是，对数组值的索引是从0开始的，而相应的<img>元素是从1开始命名的——这就需要在脚本后面的一段里进行某种计算上的调整。 PreloadImages()函数会负责把所有的图像都加载到缓冲区里，这样的话对鼠标移动的响应时间会被减到最小。一个for()循环被用在第一步里创建的图像里进行迭代，并预加载每一个图像。 ResetAll()函数是把所有图像恢复都到它们正常状态的方便方法。这是有必要的，因为当菜单的项目被点击的时候，菜单里其他所有的项目都必须在被点击项目能够切换到点击状态之前恢复到正常状态。 SetNormal()、setHover()和setClick()函数负责把特定图像（图像的编号被作为函数的自变量进行传递）的来源分别改为正常、悬停或者点击状态。由于被点击的图像必须一直保持点击状态，直到另外一个图像被点击（见第二项要求），所以它们暂时不会对鼠标移动作出反应；这样的话，如果按钮还不是处在点击状态，那么setNormal()和setHover()函数所包括的代码就只能用来改变按钮的状态。 上面所提到的预加载只是提高你JavaScript效果响应时间的多种方法之一。就在你的网站上使用上面列出的技巧，并根据你的要求在需要的地方更改它们吧。 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
上一篇: Jsp页面实现文件上传下载下一篇: 引言 - 编程入门网
关于预加载以及javascript的Image()对象的所有评论
