zoukankan      html  css  js  c++  java
  • UI事件之load

    load事件属于CSS3规范中的UI事件,load事件处理程序在页面元素和资源(html/script/link/img等)全部加载完成后在window上触发,或在img元素加载完成后再img元素上触发。可以用HTML特性的方式在body元素上绑定load事件,也可以用JavaScript在window上绑定load,所有浏览器都实现了在document上触发load事件,但它们也都支持在window上触发load,以保证向后兼容。

    <html>
    <head></head>
    <!-- html特性方式 --> <body onload="alert(loaded!)"></body> </html>
    //javascript方式---推荐
    <script>
    EventUtil.addEvent(window,'load',function(event){ alert('loaded!'); });
    </script>

    上面的代码中,event对象不包含任何事件相关信息,在支持DOM的浏览器中,event.target指向document,在ie8中,不提供srcElement属性。

    下面写几个图片加载完成后触发的load事件,并说明其中的差异:

    例1:对DOM结构中的img元素绑定load事件处理程序

    var oImg = document.getElementById('img1');
    EventUtil.addEvent(oImg,'load',function(event){
        var event  = EventUtil.getEvent(event);
        alert(EventUtil.getTarget(event).src);
    });

    以上事件处理程序中可以获取到event.target,因此也就可以访问img元素的src属性。

    例2:向DOM动态插入img元素,注意一旦img指定了src图片就会开始加载,尽管它还没有被插入到DOM结构中,所以应该先绑定load事件,再指定src。

    var oImg = document.createElement('img');
    EventUtil.addEvent(oImg,'load',function(event){
        alert('loaded!');
    });
    document.body.appendChild(oImg);
    oImg.src = 'img1.png';

    例3:为Image对象绑定load事件处理程序,注意Image对象无法添加到DOM结构中,它的作用是在DOM出现前用来在页面显示图像的,同img元素一样,一旦指定src图片就会开始加载,因此应该先绑定事件。

    var oImg = new Image();
    EventUtil.addEvent(oImg,'load',function(event){
        alert('loaded!');
    });
    oImg.src = 'img1.png';

    script元素和link元素也可以绑定load事件,但是低版本浏览器不支持,与图片加载不同的是,这两个元素只有进入DOM结构才会开始加载,因此不用注意代码顺序。

  • 相关阅读:
    我们总在避免认知失调(转)
    我们搞开发的为什么会感觉到累(转)
    循环-11. 水仙花数(20)
    谷歌技术&quot;三宝&quot;之MapReduce
    oracle存储过程实例
    网络编程学习小结
    关于window.history.back()后退问题
    区间Dp 暴力枚举+动态规划 Hdu1081
    MongoDB入门简单介绍
    Windows8和MacOS10.9双系统安装及Mac经常使用软件安装--联想E49A
  • 原文地址:https://www.cnblogs.com/luoshufang/p/5710043.html
Copyright © 2011-2022 走看看