js利用Image()对象实现图片预加载-自学php网

来源：自学PHP网时间：2014-09-19 14:47 作者：阅读:次

[导读] 图像预装载办法是使用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='heavyimagefile.jpg'"> <img name="img01" src="justanotherfile.jpg"></a> </body> </html>

注意，图片的标签（tag）本身并不处理onMouseOver()以及onMouseOut()事件，这也正是上面示例中的<img>标签被包括在<a>标签中的原因。标签<a>则包括了对这些事件类型的支持。

通过数组（arrays）装载多个图片

在实际情况中，你很有可能需要预装载不止一张的图片；比如，对于包括多个图片的菜单条，或者希望实现平滑的动画效果。要实现这些并不困难，只需要利用JavaScript的数组，如下例所示：

代码如下

复制代码

在上面的例子中，定义了变量i以及名为imageObj的Image()对象。然后定义了新数组images[]，每一个数组元素将存储需要预装载图片的地址来源

更多文章推荐