应用程序加载预读:预加载与JavaScript的Image()对象来源: 发布时间:星期三, 2008年9月10日 浏览:260次 评论:0
很多高分辨率的图像真的能够扮靓一个Web网站。但是它们也可能会降低网站的（响应）速度——图像都是文件，文件就要占用带宽，而带宽与等待时间直接相关。现在是你进行自我学习，了解如何利用一种叫做图像预加载的小技巧给网站提速的时候了。
图像的预加载 浏览器通常的工作方式是：只有当要求加载图像的HTTP请求被发送的时候，图像才会被加载，而不论它是被动地通过<img>标记加载，还是主动地通过方法调用加载。所以，如果你有一段JavaScript，需要在鼠标悬停的时候切换图像，或者在超时之后自动地更换图像，那么你就可能会在从服务器取回图像的时候随时碰到等待，时间会从数秒钟到几分钟不等。当你以较慢的速度连接到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 _disibledevent=\'index2.html\';}</script></head><body>Please wait, loading images...</body></html> 当然，你还可以创建一个图像数组，对它进行循环，预加载每个图像，并在每个阶段对已加载图像的数量保持跟踪。一旦加载了所有的图像，事件处理程序就能够按照设定把浏览器带到下一个页面（或者进行其他的任务）。 预加载与多状态菜单 现在，把你刚刚学到的理论付诸真正的实践怎么样？下面一部分内容就是我碰巧编写的一段代码——一个由多个按钮（图像链接）组成的菜单条——其中每个按钮都可能处于三种状态中的一种：正常（normal）、hover（悬停）和点击（click）。由于所有的按钮都有多个状态，所以就有必要使用图像预加载来确保菜单能够根据其切换到的状态进行快速的响应。列表A里的代码就说了这一点。 列表A里的HTML代码会建立一个由四个按钮组成的菜单条，每个按钮都有三种状态：正常、悬停和点击。其要求如下： 但鼠标移动到处于正常状态的按钮上时，按钮会变为悬停状态。当鼠标移开的时候，按钮又会恢复到正常状态。 当鼠标点击按钮的时候，按钮就会变为点击状态。它会一直保持这个状态，直到另外一个按钮被点击。 如果有一个按钮被点击，那么其他的按钮就都不能处于点击状态。其他的按钮只能够处于悬停或者正常状态。 一次只能有一个按钮可以被点击。 3
相关文章
读者评论
发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
