JS load事件（UI）

最新推荐文章于 2024-03-25 09:00:06 发布

A__loser

最新推荐文章于 2024-03-25 09:00:06 发布

阅读量1.4w

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/a__loser/article/details/71186922

版权

javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

当页面完全加载后（包括所有图像、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')">

这样在图片加载完成时就会弹出一个警告框
当然也可以通过相应的ＪＳ代码来实现.

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);
});

A__loser

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS load事件（UI）

当页面完全加载后（包括所有图像、JavaScript文件、CSS文件等外部资源），就会触发window上面的load事件。有两种定义onload事件处理程序的方式，第一种方式是使用如下的JavaScript代码： EventUtil.addHandler(window,"load",function(event){ alert("loaded!"); });//关于EventUtil这个对象
复制链接

扫一扫