当页面完全加载后(包括所有图像、JavaScript文件、CSS文件等外部资源),就会触发window上面的load事件。
有两种定义onload事件处理程序的方式,第一种方式是使用如下的JavaScript代码:
EventUtil.addHandler(window,"load",function(event){
alert("loaded!");
});//关于EventUtil这个对象的具体信息请参照前面的JS事件对象那篇文章
这是通过JavaScript来指定事件处理程序的方式。
第二种指定onload事件处理程序的方式是为<body>
元素前面添加一个onload特性,如下面的例子所示:
<!DOCTYPE html>
<html>
<head>
<title>load Event Example</title>
</head>
<body onload = "alert("Loaded!")">
</body>
</html>
一般来说,在window上面发生的任何事件都可以在<body>
元素中通过相应的特性来指定,因为在HTML中无法访问window元素。实际上这是为了保证向后兼容的一种权宜之计,但所有浏览器都能很好的支持这种方式。
图像上面也能够触发load事件
<img src = "url" onload = "alert('image loaded')">
这样在图片加载完成时就会弹出一个警告框
当然也可以通过相应的JS代码来实现.
var image = document.getElementById("myImage");
EventUtil.addHandler(image,"load",function(){
event = EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
这里,使用javaScript指定了onload事件处理程序。同时也传入了event对象,尽管他也不包含什么有用的信息。不过,事件的目标是<img>
元素,因此可以通过src属性访问并显示该信息.
在创建一个新的<img>
元素时,可以为其指定一个事件处理程序,以便图片加载完成后给出提示。此时,最重要的是要在指定src属性之前先指定事件,如下面的例子
EventUtil.addHandler(window,"load",function(){
var image = document.createElement("img");
EventUtil.addHandler(image,"load",function(){
event = EventUtil.getEvent(event);
alert(EventUtile.getTarget(event).src);
)};
document.body.appendChild(image);
image.src = "url";
)};
在这个例子中,首先为 window 指定了 onload 事件处理程序。原因在于,我们是想向 DOM中添加一个新元素,所以必须确定页面已经加载完毕——如果在页面加载前操作 document.body 会导致错误。然后,创建了一个新的图像元素,并设置了其 onload 事件处理程序。最后又将这个图像添加到页面中,还设置了它的 src 属性。这里有一点需要格外注意:新图像元素不一定要从添加到文档后才开始
下载,只要设置了 src 属性就会开始下载。所以必须在指定URL之前先指定事件处理程序。
还有一些元素也以非标准的方式支持load事件。在IE9+,Firefox,Opera,Chrome和Safari3+级更高版本中,<script>
元素也会触发load事件,以便开发人员确定动态加载的JavaScript文件是否加载完毕。与图像不同,只有在设置了<script>
元素的src属性并且将该元素添加到文档后,才会开始下载JavaScript文件。换句话说,对于<script>
元素而言,指定src属性和指定事件处理程序的先后顺序就不重要了。实例如下
EventUtil.addHandler(window,"load",function(){
var script = document.createElement("script");
EventUtil.addHandler(script,"load",function(event)
{
alert("Loaded");
});
script.src = "url";
document.body.appendChild(script);
});
这个例子使用了跨浏览器的EventUtil对象为新创建的<script>
元素指定了 onload 事件处理程序。此时,大多数浏览器中 event 对象的 target 属性引用的都是 <script>
节点,而在 Firefox 3 之前的版本中,引用的则是 document 。IE8 及更早版本不支持 <script>
元素上的 load 事件。
IE 和 Opera 还支持 <link>
元素上的 load 事件,以便开发人员确定样式表是否加载完毕。例如:
EventUtil.addHandler(window, "load", function(){
var link = document.createElement("link");
link.type = "text/css";
link.rel= "stylesheet";
EventUtil.addHandler(link, "load", function(event){
alert("css loaded");
});
link.href = "example.css";
document.getElementsByTagName("head")[0].appendChild(link);
});